Vue-router 设置路由拦截

设置路由拦截

创建js文件

import router from '../router'
// import { Message } from 'element-ui' // 引入element 消息提示
import NProgress from 'nprogress' // 引入页面加载NProgress
import 'nprogress/nprogress.css' // 引入页面加载NProgress样式
// import store from '../store'
import getPageTitle from '@/utils/get-page-title'
import { getToken } from '@/utils/Cookies' // 获取Token

NProgress.configure({ showSpinner: false }) // NProgress 配置

const whiteList = ['/login'] // 设置白名单

router.beforeEach(async(to, from, next) => {
    NProgress.start()
    document.title = getPageTitle(to.meta.title) //设置页面title
    const token = getToken(); //获取token
    if (token) { //判断token是否存在
        if (to.path == '/login') {
            next({ path: "/" })
            NProgress.done()
        }
        next()
    } else {
        if (whiteList.indexOf(to.path) !== -1) {
            // in the free login whitelist, go directly
            next()
        } else {
            next(`/login?redirect=${to.path}`);
            NProgress.done()
        }
    }
})

router.afterEach(() => {
    // 路由加载结束
    NProgress.done()
})

在main.js 中引入

import './utils/routerIntercept'