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

news2025/1/20 3:37:27

@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