react路由鉴权 / 路由守卫
首先路由鉴权就是在访问一个页面时判断是否需要权限,比如电商App结算账单的时候需要登录用户的账号
路由守卫就是在该页面需要登录用户的情况下去判断是否登录
总的来说就是 判断权限是鉴权 判断是否登录就是守卫 我那这个电商给大家举个例子 项目的不同,要求不同,到时候根据需求去完成就行
下面是代码
创建一个SafeRouter.js文件
import React from 'react';
import {Redirect,Route} from 'react-router-dom';
const SafeRouter = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
//判断是否登录 在登录页面登录成功的时候把用户名保存到本地
Boolean(localStorage.getItem("isLogin")) ?
(
<Component {...props} />
)
: (
<Redirect
to={{
pathname: "/logins",//重定向到的网页位置
state: { from: props.location }
}}
/>
)
}
/>
);
export default SafeRouter
在需要鉴权的页面上引入这个SafeRouter.js文件
在写路由点击的时候可以把需要鉴权的route 换成你引入的文件SafeRouter 去包裹
代码如下
不需要守卫的情况下 用Route包裹
<Route path="/detail" component={Detail}></Route>
不要守卫的情况下 用Route包裹
<SafeRouter path="/detail" component={Detail}></SafeRouter>
下面是我的一个组件中的路由判断 不用复制,读懂就行
import React, { Component } from 'react'
import { BrowserRouter as Router, Route,Redirect } from 'react-router-dom'
import Index from "../pages/index/First"
import Logins from "../pages/logins/Login"
import Detail from "../pages/detail/Detail"
import SafeRouter from "./SafeRouter"
import Grade from "../pages/index/my/Grade"
export default class index extends Component {
render() {
return (
<div className="content_router">
<Router>
<SafeRouter path="/index/First" component={Index}></SafeRouter>
<Route path="/logins" component={Logins}></Route>
<SafeRouter path="/detail" component={Detail}></SafeRouter>
<SafeRouter path="/Grade" component={Grade}></SafeRouter>
//从定向到首页
<Redirect to="/index/First"></Redirect>
</Router>
</div>
)
}
}