pc端上方进度条功能实现

累了要吃肉丶

于 2025-02-12 10:14:02 发布

阅读量118

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/qq_43610311/article/details/145584764

一、引入第三方组件

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()
})