Vue3+Element-Plus 登录页面访问权限控制功能实现十七

1. 路由导航守卫控制页面访问权限

1.1 为什么需要路由导航守卫控制页面访问权限

㈠ 对于一些有权限的页面，只有在登录的情况下才允许访问。防止用户在未登录的状态下，直接通过页面URL进行访问。这种行为是不允许存在的。

㈡ 根据token来判断用户是否登录，如果用户未登录，访问有权限的URL时，强制跳转登录页面。

㈢ 如何实现强制跳转，就需要使用到路由导航守卫。

1.2 什么是路由导航守卫控制权限

㈠ beforeEach 就是路由导航守卫

㈡ 如何添加路由导航守卫

在路由组件中，为路由对象添加beforeEach 导航守卫函数。

beforeEach 接受一个回调函数，该函数中，包含3个形参。

• to 代表将要访问的页面路径
• from 代表从那个页面跳转过来
• next 代表放行函数

next 放行函数有两种形式：

next() 表示直接放行

next('/login')  表示强制跳转到某个页面，如当前强制跳转到login页面

㈢ beforeEach 导航守卫函数理解

首先要进行判断，to 对应的地址是否是/login页面。如果to.path等于用户访问的/login，证明用户访问的是登录页。在这里，登录页面是没有设置权限的，谁都可以进行访问。

所以，to.path 判断用户直接访问的是登录页面/login，直接调用next()函数放行。

如果访问的不是登录页面，判断sessionStorage是否存在了一个token值。取出token值进行判断，是否存在token值。如果不存在token值，证明用户访问的是有权限的页面，使用next('/login') 函数强制跳转到登录页面。

㈣ 如上综合所述，根据用户访问的地址以及用户是否有token值来决定用户访问的页面。

1.3 如何实现路由导航守卫控制权限

㈠ 改造路由组件

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

㈡ 效果图，输入home 需要权限访问的页面时 

㈢ 回车后，直接变成这个页面

 以上出自于：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=1