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

Posted codeMak1r.小新

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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就是一个高阶组件

function AuthRoute( children ) 
  // 获取token
  const 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中取token
const getToken = () => 
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-line
export default [
  // 不需要鉴权的组件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'
// 路由懒加载
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => 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 = new VueRouter(
  routes
)
// 挂载路由导航守卫
router.beforeEach((to, from, next) => 
  // to代表将要访问的路径
  // from代表从哪个路径跳转而来
  // next是一个函数,表示放行
  //    next() 放行   next('/login') 强制跳转到login页面
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
)

export default router

代码解释:
router.beforeEach用来设置Vue的路由导航守卫(路由拦截),其接收一个回调函数作为参数。
在回调函数内部,接收三个参数,顺序分别是:to , from , next
to代表将要访问的路径
from代表从哪个路径跳转而来
next是一个函数,表示放行
next() => 放行next('/login') => 强制跳转到login页面

以上是关于Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)的主要内容,如果未能解决你的问题,请参考以下文章

路由导航守卫(导航钩子)

路由守卫和拦截器

前后端分离学习笔记 ---[跨域问题,JWT,路由守卫,Axios设置请求拦截和响应拦截]

前后端分离学习笔记 ---[跨域问题,JWT,路由守卫,Axios设置请求拦截和响应拦截]

Vue路由守卫详解

vue项目常见之五:路由拦截器(permission),导航守卫