react路由鉴权 / 路由守卫

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>
        )
    }
}