zoukankan      html  css  js  c++  java
  • vue项目中使用nprogress加载进度条

    nprogress 是页面跳转时候出现在浏览器顶部的进度条,后台系统和移动端都很常用。

    安装

    npm install --save nprogress

    使用

    import NProgress from 'nprogress' // Progress 进度条
    import 'nprogress/nprogress.css' // Progress 进度条样式
    NProgress.start(); //开始
    NProgress.done(); // 结束

    配合拦截登录,token验证

    // 拦截登录,token验证
    router.beforeEach((to, from, next) => {
        NProgress.start()
        if (store.getters.token && Cookie.get('User-Token')) {
            // 存在token
            if (to.path === '/login') {
                NProgress.done()
                next({ path: '/' })
            } else {
                if (store.getters.routers.length === 0) {
                    console.log("进入验证权限")
                    // 验证权限
                    getProhibitedList({
                        site_id: store.getters.siteid
                    }).then(res => {
                        // console.log(res);
                        const prohibitedList = res.list;
                        store.dispatch('GenerateRoutes', prohibitedList).then(() => {
                            router.addRoutes(store.getters.routers)
                            next({ ...to, replace: true })
                        })
                    }).catch(err => {
                        console.log(err)
                        store.dispatch('removeLoginInfo').then(() => {
                            router.app.$router.push({ path: '/login' })
                        })
                    })
                } else {
                    next()
                }
            }
        } else {
            // 不存在token,去登录
            if (writeList.indexOf(to.path) >= 0) {
                next()
            } else {
                next({ path: '/login' })
                NProgress.done()
            }
        }
    })
    router.afterEach(() => {
        NProgress.done()
    })
  • 相关阅读:
    H264关于RTP协议的实现
    RTSP交互命令简介及过程参数描述
    RTSP协议详解
    TCP 协议中MSS的理解
    RTSP 协议分析
    Linux下/etc/resolv.conf 配置DNS客户
    371. Sum of Two Integers
    python StringIO
    高效的两段式循环缓冲区──BipBuffer
    JavaScript Lib Interface (JavaScript系统定义的接口一览表)
  • 原文地址:https://www.cnblogs.com/theblogs/p/13094760.html
Copyright © 2011-2022 走看看