vue-admin-template——添加页面跳转白名单——基础积累

最近公司在搞前端培训，正好看到有同事分享vue-admin-template框架，分享的是白名单的功能：

也就是说：有些页面是不需要进行登录信息校验就可以查看的，这样的页面叫白名单页面。

下面将代码附上，如果有用到的时候，可以借鉴一下：

permission.js文件

import router from './router'
import store from './store'
import {Message} from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import {getToken} from '@/utils/auth'
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({showSpinner:false})

//设置白名单
const whiteList = ['/login'];
router.beforeEach(async(to,from,next)=>{
	NProgress.start();
	document.title = getPageTitle(to.meta.title)
	const hasToken = getToken();
	if(hasToken){
		if(to.path=='/login'){
			next({path:'/'})
			NProgress.done();
		}else{
			const hasGetUserInfo = store.getters.name
			if(hasGetUserInfo){
				next();
			}else{
				try{
					await store.dispatch('user/getInfo')
				}catch(error){
					await store.dispatch('user/resetToken')
					Message.error(error||'Has Error')
					next(`/login?redirect=${to.path}`)
					NProgress.done();
				}
			}
		}
	}else{
		if(whiteList.indexOf(to.path)!=-1){
			next();
		}else{
			next(`/login?redirect=${to.path}`)
			NProgress.done();
		}
	}
})
router.afterEach(()=>{
	NProgress.done();
})