react路由鉴权 / 路由守卫-蒲公英云

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