基于React Router6 TS实现路由守卫

04-19 5698阅读 0评论

定义路由表

import {BrowserRouter, Route, RouteObject, Routes,} from "react-router-dom";
import {Home, Login, NotFound} from "@/views";
import {RouterGuard} from "@/routers/router_guard.tsx";
import {ReactNode} from "react";
import {Test} from "@/views/test/test.tsx";
import {LOGIN_PATH} from "@/utils/constant";
import {Broken} from "@/views/Broken/broken.tsx";
type AuthRouteObject = {
    needAuth?: boolean
}
const router: RouteObject[] & AuthRouteObject[] = [
    {
        path: "/",
        element: ,
        needAuth: true,
        children:[
            {
                path: "/test",
                element: ,
            }
        ]
    },
    {
        path: LOGIN_PATH,
        element: ,
        needAuth:true
    },
    {
        path:"/500",
        element:
    },
    {
        path: "*",
        element: 
    }
]
export const RenderRouters = () => {
    const traverseRoutes = (router: RouteObject[] & AuthRouteObject[]) => {
        return router.map((route: RouteObject & AuthRouteObject): ReactNode => {
            const element =  route?.needAuth} element={route.element}/
            if(Array.isArray(route.children) && route.children.length>0){
                return (
                    route.path} element={element} key={route.path}
                        {traverseRoutes(route.children)}
                    
                )
            }
            return route.path} element={element} key={route.path}/
        })
    }
    return (
        
            
                
                    {traverseRoutes(router)}
                
            
        
    )
}

定义守卫组件

import {PropsWithChildren, ReactNode} from "react";
import {useUserStore} from "@/store/user_store";
import {Navigate, useLocation} from "react-router-dom";
import {LOGIN_PATH} from "@/utils/constant";
interface Props extends PropsWithChildren {
    element: JSX.Element | ReactNode
    needAuth?:boolean
}
export const RouterGuard = (props: Props): JSX.Element | React.ReactNode => {
    const userStore = useUserStore()
    const pathName = useLocation().pathname
    const token = userStore.token
    if (!props.needAuth){
        return props.element
    }
    if (token && pathName == LOGIN_PATH){
        return 
    }
    if (!token && pathName !== LOGIN_PATH) {
        return LOGIN_PATH} replace
    }
    return props.element
}

使用

import './App.css'
import {RenderRouters} from "@/routers/router.tsx";
function App() {
    return (
        
            
        
    )
}
export default App

效果展示

2、【vue3+ts项目】配置eslint校验代码工具，eslint+prettier+stylelint

3、ESlint报错[vue/comment-directive]cleareslint-plugin-vue及Cannot find name ‘template‘.

4、Elasticsearch中父子文档的关联：利用Join类型赋予文档的层级关系

5、睿智的目标检测66——Pytorch搭建YoloV8目标检测平台

免责声明

1、本网站属于个人的非赢利性网站，转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务，本网站概不负责，亦不负任何法律责任。
4、本网站所刊发、转载的文章，其版权均归原作者所有，如其他媒体、网站或个人从本网下载使用，请在
转载有关文章时务必尊重该文章的著作权，保留本网注明的“稿件来源”，并白负版权等法律责任。

手机扫描二维码访问