废话少说,直接看需求:
假设某应用中有以下三个页面:
登陆页----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>
);