React 登陆鉴权路由设置
主文件:
<HashRouter > <ErrorBoundry> <Suspense fallback={Loading()}> <Switch> <Route exact path="/login" component={Login}/> {/* 要经过登录验证的页面都要使用PrivateRoute包装 */} <PrivateRoute exact path="/" component={Home1}/> <PrivateRoute path="/user" component={User1}/> <PrivateRoute path="/detail/:id" component={Detail}/> <Route path="*" component={NotFound}/> </Switch> </Suspense> </ErrorBoundry> </HashRouter>
PrivateRoute:
const PrivateRoute = (props) => { const { user: { isLogin , isAdmin} , component: Cmp , ...rest } = this.props; const pathname = this.props.location.pathname; // 从哪儿来 const NCmp = HFhoc(Cmp); return isLogin ? // 如果是已经登录的状态 去其他界面 应该就是对应的界面 <Route {...rest} render = {props => { return <NCmp {...props}/> }} /> : <Redirect to={{ pathname:'/login', state: pathname }}/> }
Login:
const Login = () => { if (user.isLogin) { return <Redirect to={pathname} /> } return <div>Login</div> }
- 上一篇 »vue:路由守卫
- 下一篇 »IIS 管理器无法验证此内置帐户是否有访问权