使用React HOC优雅得实现分层权限的路由

3,398 阅读2分钟

废话少说,直接看需求:

假设某应用中有以下三个页面:

    登陆页----Home.jsx
    页面A----PageA.jsx
    页面B----PageB.jsx

有以下三种用户:

    游客(未登录)---只能访问登陆页
    普通用户(已登陆)---能访问登陆页及页面A
    管理员(已登陆)---能访问所有页面

具体需求如下:

  • 游客访问除登陆页以外的页面时自动跳到登陆页。
  • 普通用户访问页面B时页面显示无权限访问

分析需求可以得到游客、会员、管理员的权限逐层递增的。管理员的权限范围包含普通用户的权限范围,普通用户的权限范围包含游客权限范围。

所以首先将是否登陆作为第一层权限:

withUserPermission.jsx代码如下

import React from 'react';
import { Redirect } from 'react-router-dom';
import { getUser } from '@/user.js';    //  判断是否已登陆用户

export default Wrapper => hocProps => {
    const { component: Component, ...rest } = hocProps;

    const user = getUser();

    return (
        <Wrapper {...rest} component={ props => {
            return user
                ? <Component {...props} />
                : <Redirect to="/login" />  //  跳转到登陆页
        } } />
    );
}

然后在第二层权限,判断是否具有管理员权限: withAdminPermission.jsx代码如下

import React from 'react';
import { getRole } from '@/user.js';    //  获取用户角色

export default Wrapper => hocProps => {
    const { component: Component, ...rest } = hocProps;

    const hasPermission = (getRole() === 'admin') ;

    return (
        <Wrapper {...rest} component={ props => {
            return hasPermission
                ? <Component {...props} />
                : <h1>无权限访问</h1>
        } } />
    );
}

使用这两个高阶组件,封装Route

PrivateRoutes.js代码如下

import { Route } from 'react-router-dom';
import withUserPermission from './withUserPermission';
import withAdminPermission from './withAdminPermission';

export const UserRoute = withUserPermission(Route);
export const AdminRoute = withUserPermission(withAdminPermission(Route));   //  从外向内提升权限

下面可以使用这两个封装好的Route组件,实现上面的需求:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { UserRoute, AdminRoute } from './PrivateRoutes';

import PageLogin from 'views/PageLogin';
import PageA from 'views/PageA';
import PageB from 'views/PageB';

export default () => (
    <Router>
        <Route path='/login' component={PageLogin} />
        <UserRoute path='/pageA' component={PageA} />
        <AdminRoute path='/pageB' component={PageB} />
    </Router>
);