vuequanxain/src/router/permission.js

import router from "./index"
import store from "../store/index"

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({
    easing: 'ease',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
})


router.beforeEach((to, from, next) => {
    NProgress.start();
    NProgress.inc();
    if (!store.state.user.token) {

        //未登录  页面是否需要登录
        if (to.matched.length > 0 && !to.matched.some(record => record.meta.requiresAuth)) {
            next();
        } else {
            next({
                path: "/login"
            })
        }
    } else {
        // 用户已经登录  路由的访问权限

        if (!store.state.permission.permissionList) {
            store.dispatch("permission/FETCH_PERMISSION").then(() => {
                next({
                    path: to.path
                })
            })
        } else {
            // store存在权限
            if (to.path !== "/login") {
                next();
            } else {
                next(from.fullPath)
            }
        }
    }
})

router.afterEach(() => {
    // 在即将进入新的页面组件前，关闭掉进度条
    NProgress.done()
})