B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

React中react-router-dom V6实现简单的路由鉴权

Published on:2022-05-11

react-router-dom V6实现简单的路由鉴权


一、创建一个鉴权的组件,进行鉴权判断逻辑


下面是判断是否登录的简单实现

import React from 'react'
import { useSelector } from 'react-redux'
import { Navigate, useLocation } from 'react-router-dom'

const AuthRouter = ({ children }) => {
    const token = useSelector((state) => state.token)
    const location = useLocation()
    if (token) {
        return children
    } else {
        return <Navigate to='/login' replace state={{ from: location }}></Navigate>
    }
}
export default AuthRouter


二、在路由文件中将需要进行登录判断的路由进行组件包含


import { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import AuthRouter from './AuthRouter'
const Index = lazy(() => import('../views/Index'))
const Login = lazy(() => import('../views/Login'))
const Error = lazy(() => import('../views/Error'))
const routes = [
    {
        path: '/',
        element: (
            <AuthRouter>
                <Index />
            </AuthRouter>
        )
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/error',
        element: <Error />
    },
    {
        path: '*',
        element: <Navigate to='/error' replace />
    }
]
export default routes


三、App.js中进行路由的加载和组件的懒加载


import React, { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
import routes from './router'
import PageLoading from './components/PageLoading'
const App = () => {
    const routeList = useRoutes(routes)
    return (
        <>
            <Suspense fallback={<PageLoading />}>{routeList}</Suspense>
        </>
    )
}
export default App



如上当未登录时,访问/时,就会自动跳转到 /login

留言列表(0)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    • B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
    • B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
    • B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
    • B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
    • See also:gitee.com@b5net
    最新评论
    奥德赛 on Electron+vue搭建项目或将vue项目转为electron :大声道奥术大师大声道
    cmf :我的qq 292864861
    cmf :你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
    laravel新手 :您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类