Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)

** 欢迎来到我的博客**
**📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥

      R
     
     
      e
     
     
      a
     
     
      c
     
     
      t
     
     
      框架
     
    
    
     React框架
    
   
  React框架🔥，中间穿插了一些基础知识的回顾

🌈博客主页👉codeMak1r.小新的博客**

😇本文目录😇

本文被专栏【React–从基础到实战】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

路由导航守卫

本节目标:

能够实现未登录时访问拦截并跳转到登录页面（路由鉴权实现）

1. React项目中

实现思路

自己封装

AuthRoute

路由鉴权高阶组件，实现未登录拦截，并跳转到登录页面

思路为：判断本地是否有token，如果有，就返回子组件，否则就重定向到登录Login

实现步骤

1. 在 components 目录中，创建 AuthRoute/index.js 文件
2. 判断是否登录
3. 登录时，直接渲染相应页面组件
4. 未登录时，重定向到登录页面
5. 将需要鉴权的页面路由配置，替换为 AuthRoute 组件渲染

代码实现

components/AuthRoute/index.js

// 路由鉴权// 1. 判断token是否存在// 2. 如果存在 直接正常渲染// 3. 如果不存在 重定向到登录路由import{ Navigate }from"react-router-dom";import{ getToken }from"@/utils";// 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件// 这里的AuthRoute就是一个高阶组件functionAuthRoute({ children }){// 获取tokenconst tokenStr =getToken()// 如果token存在 直接正常渲染if(tokenStr){return<>{children}</>}// 如果token不存在，重定向到登录路由else{return<Navigate to='/login' replace />}}{/*
 <AuthRoute> <Layout /> </AuthRoute> 
 登录：<> <Layout /> </>
 非登录：<Navigate to="/login" replace />
*/}export{ AuthRoute }

注：utils工具函数

getToken

如下

// 从localstorage中取tokenconstgetToken=()=>{return window.localStorage.getItem(key)}

src/routes/index.js路由表文件

import Layout from"@/pages/Layout";import Login from"@/pages/Login";import{ AuthRoute }from"@/components/AuthRoute";// eslint-disable-next-lineexportdefault[// 不需要鉴权的组件Login{path:"/login",element:<Login />},// 需要鉴权的组件Layout{path:"/",element:<AuthRoute><Layout /></AuthRoute>}]

2. Vue项目中

实现思路

在Vue的router路由表文件中，存在官方封装好的API：

beforeEach

。

代码实现

/src/router/index.js

import Vue from'vue'import VueRouter from'vue-router'// 路由懒加载constLogin=()=>import(/* webpackChunkName: "login_home_welcome" */'../components/Login.vue')constHome=()=>import(/* webpackChunkName: "login_home_welcome" */'../components/Home.vue')constWelcome=()=>import(/* webpackChunkName: "login_home_welcome" */'../components/Welcome.vue')
Vue.use(VueRouter)const routes =[{path:'/login',component: Login
  },{path:'/',redirect:'/login'},{path:'/home',component: Home,redirect:'/welcome',children:[{path:"/welcome",component: Welcome }]}]const router =newVueRouter({
  routes
})// 挂载路由导航守卫
router.beforeEach((to, from, next)=>{// to代表将要访问的路径// from代表从哪个路径跳转而来// next是一个函数，表示放行//    next() 放行   next('/login') 强制跳转到login页面if(to.path ==='/login')returnnext()// 获取tokenconst tokenStr = window.sessionStorage.getItem('token')if(!tokenStr)returnnext('/login')next()})exportdefault router

代码解释：

router.beforeEach

用来设置Vue的路由导航守卫（路由拦截），其接收一个回调函数作为参数。
在回调函数内部，接收三个参数，顺序分别是：

to , from , next

。
to代表将要访问的路径
from代表从哪个路径跳转而来
next是一个函数，表示放行

next() => 放行

，

next('/login') => 强制跳转到login页面