七、登录鉴权

前言

首先要明确什么是登录鉴权：

• 在登录成功之后，会跳转到后台页面，用户未登录的情况下输入 /login 之外的其他页面，提示未登录。
• 用户登录后，token 过期之前都不允许进入 login 页面，重复登录。

这里使用 路由守卫 来实现这个功能，在配置之前先引入一个进度条组件，优化一下操作体验

1. 引入 NProgress 进度条组件

1.1 安装依赖

npm install --save nprogress

1.2 新建 src/plugins/nprogress.ts 进度条配置文件

想要进一步了解，参考官方文档：github.com/rstacruz/np…

import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 全局进度条配置
nprogress.configure({
  easing: 'ease', // 动画方式
  speed: 500, // 递增进度条速度
  showSpinner: false, // 是否现实加载ico
  trickleSpeed: 400, // 自动递增间隔
  minimum: 0.3 // 初始化时最小百分比
})

export default nprogress

TIPS： 这个时候，可能会爆红，这是因为TS类型检测的原因，安装一下类型支持，重新打开一下这个配置文件应该就可以了

npm i --save-dev @types/nprogress

2. 配置路由守卫

在 src 下新建 permission.ts, 并在 main.ts 中引入。代码我就不贴出来了，可以在这里看: gitee.com/cao-shen-ya…

3. 一些其他调整

这里记录一下一些变更，详细可以看代码仓库。

• 将原先手动持久化的 token，放在了用户的 store 里

• 由于存储方式的修改，请求携带 token 的地方(request.ts)也要同步修改，并且给错误添加了弹框 ElMessage.error(message)

• 便于测试添加了首页路由

• 添加了 404 页面