业务开发多数页面存在权限判断，比如简单的判断是否登录，没有登录，重定向到登录页面。封装AuthRoute组件，当路由对应的页面有特殊权限要求时，直接使用AuthRoute代替react-router的Route组件。
AuthRoute组件
/**
* 判断是否有页面权限
*/
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
const AuthRoute = ({ component: Component, permissionKey, ...rest }: any) => {
// 从redux store中获取登录状态、权限状态
const userStore = useSelector((state: any) => state.userStore);
const { isLogin, userRole } = userStore;
const dispatch = useDispatch();
return (
<Route
{...rest}
render={(props: any) => {
// 先判断是否登录
if (isLogin) {
// 用户登录再判断用户是否有当前页面的权限
if (permissionKey) {
// 当前页面路由有配置权限key时才判断用户是否有该页面的权限
if (!userRole.includes(permissionKey)) {
// 如果用户没有该页面权限跳转到无权限页面
return <Redirect to="/no-permssion" />;
}
}
// 正常显示配置的页面组件
return <Component {...props} />;
} else {
// 没有登录直接重定向到登录
return <Redirect to="/login" />;
}
}}
/>
)
}
export default AuthRoute;
使用
<Router history={history}>
<Switch>
// 登录路由(无需判断登录状态，使用Route即可)
<Route exact path="/login" component={Login} />
// 无权限时跳转的页面
<Route exact path="/no-permssion" component={NoPermission} />
// 需要判断权限的页面(permissionKey是当前路由对应的权限key)
<AuthRoute exact path="/test" component={Test} permissionKey="test" />
// 判断登录状态，无需特殊的权限判断的页面使用AuthRoute，不传递permissionKey属性即可
<AuthRoute exact path="/home" component={Home} />
</Switch>
</Router>
