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