项目中实现简单的react登录鉴权

最新推荐文章于 2024-01-29 16:31:09 发布

铁臂A木木

最新推荐文章于 2024-01-29 16:31:09 发布

阅读量812

点赞数 2

本文链接：https://blog.csdn.net/AstroSadmummy/article/details/124768467

版权

React 路由权限控制高阶组件 token验证

关键词由CSDN通过智能技术生成

创建一个路由映射表

import Home from '../pages/home/Home'
import Login from '../pages/login/Login'
import {IRoutes} from '../types/routes-type'
const routes:Array<IRoutes> = [
{path:'/login',name:"home",component:Login},
{auth:true,path:'/home',name:"home",component:Home},
{auth:true,path:'/gen/serviceorder/getEveryIncome',name:"getEveryIncome",component:Home},
{auth:true,path:'/gen/serviceorder/getTotalIncome',name:"getTotalIncome",component:Home},
{auth:true,path:'/shoporder/myServiceOrder',name:"myServiceOrder",component:Home},
{auth:true,path:'/shoporder/myShopOrderData',name:"myShopOrderData",component:Home},
{auth:true,path:'/message',name:"message",component:Home},
{auth:true,path:'/serviceinfo',name:"serviceinfo",component:Home},
//省略后面的路由
]
export default routes

创建一个RouterAuth高阶组件

import React from 'react';
import { Redirect, Route } from 'react-router';
import {useLocation} from 'react-router-dom';//获取路由对象
import routes from '../config/routerConfig';//引入路由映射表
type Props = {}
export default function RouterAuth(props: Props) {
    const location = useLocation<Location>();
    const pathname:string = location.pathname;//取到当前路由
    const token:string  = window.localStorage.getItem('token') || '';
    //判断当前路由是否在路由映射表中
    const targetRouter:any = routes.find(item=>item.path.replace(/\s*/g,'') ===pathname)
    //判断是否在配置文件中
    if(targetRouter){
        //判断是否需要身份认证
        if(targetRouter.auth){
            //进行token验证
            if(token){
                return <Route path={targetRouter.path} component={targetRouter.component}></Route>
            }else{//不通过返回login
                return <Redirect to='/login'></Redirect>
            }
        }else{//不需要则通过
        return <Route path={targetRouter.path} component={targetRouter.component}></Route>
        }
    }else{//没有返回404
    return <Redirect to="/404"></Redirect>
    }
}