定制开发小程序欢迎来到我的博客
📔定制开发小程序博主是一名大学在读本科生，定制开发小程序主要学习方向是前端。
🍭定制开发小程序目前已经更新了【Vue】、【React–定制开发小程序从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥$React框架$🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉

😇本文目录😇

本文被专栏收录

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

路由导航守卫

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

1. 中

实现思路

自己封装 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 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

注：utils工具函数getToken如下

// 从localstorage中取tokenconst getToken = () => {return window.localStorage.getItem(key)}
1
2
3
4

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

import Layout from "@/pages/Layout";import Login from "@/pages/Login";import { AuthRoute } from "@/components/AuthRoute";// eslint-disable-next-lineexport default [  // 不需要鉴权的组件Login  {    path: "/login",    element: <Login />  },  // 需要鉴权的组件Layout  {    path: "/",    element: <AuthRoute>      <Layout />    </AuthRoute>  }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. 中

实现思路

在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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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