一、引入第三方组件

npm install nprogress

二、新建鉴权文件permission.ts，创建导航守卫，直接调用进度条方法即可

// 鉴权 与 配置
import router from './router/index'
// 引入进度条插件
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'

import {
    
     ElMessage } from 'element-plus'

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
    
    
    const token = localStorage.getItem('TOKEN'); // 从localStorage中获取token
    // 如果页面需要鉴权并且token不存在 直接跳转到登录页面
    nprogress.start() // 上方加载进度条
    if (to.meta.requiresAuth && !token) {
    
    
        ElMessage({
    
    
            type: 'warning',
            message: '请先登录！'
        })
        next({
    
     path: '/login' }); // 如果需要登录验证且用户未登录，则跳转到登录页面
    } else {
    
    
        next(); // 否则继续路由导航
    }
});

router.afterEach((to, from) => {
    
    
    nprogress.done()
})