vue3:九、路由守卫

官网参考：导航守卫 | Vue Router

一、Vue 路由守卫的作用

​1、权限控制

检查用户是否已登录，如果未登录则重定向到登录页面。

根据用户角色限制访问某些路由。

​2、数据预加载

在进入路由前加载必要的数据，确保页面渲染时有完整的数据。

3、​导航拦截

在某些条件下阻止用户离开当前页面（例如表单未保存时）。

​4、日志记录

记录用户访问的路由，用于分析或调试。

​5、动态路由

根据条件动态添加或修改路由。

二、根据路由守卫更改页面的名称

1、引入基本语法

首先输出一下to和from参数

//设置路由守卫
router.beforeEach((to, from, next) => {
  console.log('to', to)
  console.log('from', from)
  next()
})

可查看到一个参数meta.title，其可对标题名称进行修改

2、设置系统总标题

直接设置一个变量即可

//设置系统标题
const SystemTitle = 'SMS后台管理系统';

3、设置路径的标题

在之前设置的项中，设置meta下title的名称

只用设置外层页面的标题，主要的含导航内容的页面暂不修改

4、修改页面标题

修改页面的标题的方法为document.title

//设置系统标题
const SystemTitle = 'SMS后台管理系统';
//设置路由守卫
router.beforeEach((to, from, next) => {
  if(to.meta.title){
    document.title = to.meta.title + '-' + SystemTitle
  }
  next()
})

5、测试效果

三、权限控制

主要针对需要登录的页面，

• 没有token
  • 在需要登录的页面-跳转登录页面
  • 不需要登录的页面-放行(可以继续执行)
• 有token
  • 如果在登录页面-跳转到主页面
  • 如果没在登录页面-pinia读取用户信息

1、基本信息设置

首先获取token，查看token是否存在，如果不存在需要跳转到登录页面

①引入token获取

import { getToken } from '@/utils/token';

②获取token

const token = getToken();

③设置无需登录的页面

取name名称，因为404页面的path是一个变化量（