react路由鉴权 / 路由守卫

Love The Way You Lie 2023-06-22 10:34 1阅读 0赞

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