@TOC

前景

技术方案

在这里插入图片描述

实现步骤

// 引入封装获取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&gt;</Navigate>
  }
}

export default AuthRouter

// 路由配置
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

原文地址:https://blog.csdn.net/Gik99/article/details/134768561

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_33726.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注