Vue路由鉴权

一、路由鉴权的条件

1.首先判断token是否存在
2.如果存在判断token是否有效
3.如果存在并且有效就放行，但是不能到login页面
4.如果不存在或者token过期就按未登录处理
5.未登录只能在login页面

二、实现方案

// 引入router
import router from '@/router'
// 引入nprogress
import nprogress from 'nprogress'
// 引入nprogress样式
import 'nprogress/nprogress.css'
// 类型定义
// 引入pinia仓库
import useUserStore from '@/store/modules/user'
import pinia from '@/store/index'
let userStore = useUserStore(pinia)

// 全局前置守卫
router.beforeEach(async (to: any, from: any, next: any) => {
    // 不管有没有token先获取token
    // 不管有没有用户信息先获取用户信息
    // 只有存在token并且获取用户信息返回的200才可以证明token是有效的token
    // 不然有token但是无效也相当于没有登录
    let token = userStore.token
    let res = await userStore.getUserInfo()
    // to:将要访问哪一个路由
    // from:从哪一个路由来
    // next：放行路由
    nprogress.start()
    // 根据token判断是否登录 并且判断token是否过期
    if (token && res.code == 200) {
        // 登录了就不允许回到login页面
        if (to.path == '/login') {
        // 返回到login页面就会强制跳转到首页
            next({ path: '/' })
        } else {
        // 没有强制跳转到login页面就放行
            next()
        }
    } else {
        // 未登录
        // 判断路径
        if (to.path == '/login') {
            // 如果本来就在login页面就放行
            next()
        } else {
            // 如果不在login页面就放行到login页面
            next({ path: '/login', query: { redirect: to.path } })
        }
    }

})
// 全局后置守卫
router.afterEach((to: any, from: any, next: any) => {
    nprogress.done()
})