通过HOC实现分层权限的路由

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

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

有以下三种用户：

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

具体需求如下：

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

// withUserPermission.js
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
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));

// app.js
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>
);