react之封装有无Token(路由权限控制)的高阶组件

最新推荐文章于 2024-10-14 13:08:26 发布

Gik99

最新推荐文章于 2024-10-14 13:08:26 发布

阅读量469

点赞数

分类专栏： React 文章标签： react.js javascript

本文链接：https://blog.csdn.net/Gik99/article/details/134768561

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ReactRouter进行路由权限控制，通过AuthRoute组件检测Token，确保只有登录用户才能访问敏感内容。实现步骤包括创建AuthRoute组件并配置router文件夹中的路由以使用此组件。

摘要由CSDN通过智能技术生成

@TOC

前景

有些路由页面内的内容信息比较敏感，如果用户没有经过登录获取到有效Token，是没有权限跳转的，根据Token的有无控制当前路由是否可以跳转就是路由的权限控制

技术方案

在这里插入图片描述

实现步骤

1.在 components 目录中，创建 AuthRoute/index.jsx 文件

// 引入封装的获取token方法
import { getToken } from '@/utils'
//引入跳转
import { Navigate } from 'react-router-dom'
//children为组件
function AuthRouter({ children }) {
  const token = getToken()
  if (token) {
  //有token 跳转到该组件
    return <>{children}</>
  } else {
  //无token 跳转到登录页面
    return <Navigate to={'/login'} replace></Navigate>
  }
}

export default AuthRouter

2.router文件夹下index.js 将需要鉴权的页面路由配置，替换为 AuthRoute 组件渲染

// 路由配置
import Layout from '@/pages/Layout'
import Login from '@/pages/Login'

import { createBrowserRouter } from 'react-router-dom'
//引入鉴定token组件
import AuthRouter from '@/components/AuthRoute'
const router = createBrowserRouter([
  {
    path: '/',
    element: (
    //鉴定token高阶组件
      <AuthRouter>
        <Layout></Layout>
      </AuthRouter>
    ),
  },
  {
    path: '/login',
    element: <Login></Login>,
  },
])

export default router