//NProgress进度条样式,import引入
//import NProgress from 'nprogress'
//import 'nprogress/nprogress.css'
// NProgress Configuration 是否有转圈效果
//NProgress.configure({ showSpinner: false })
const AUTH_WHITE_LIST = ['/login', '/401'] //白名单路由
// 路由处理--登录验证
router.beforeEach(async(to, from, next) => {
// 开始进度条
NProgress.start()
// 设置页面标题
if (to.matched.length !== 0) {
document.title = '页面标题' + (to.meta.title === undefined ? '' : ' - ' + to.meta.title)
}
// 判断是否登录时,因为页面刷新后内存中还没有token信息,额外从session中判断一次
if (!AuthUtils.isLogin()) {
const sessionStore = SessionStorageUtils.getStore()
store.replaceState(Object.assign({}, store.state, sessionStore))
}
if (AuthUtils.isLogin()) {
// 已经登录的,不能跳到登陆页面,跳到首页
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (to.matched.length === 0) { // to.matched.length代表是否匹配到当前要跳转的路由
next('/404')// 未知页面调错误页
NProgress.done()
} else if (to.meta && !AuthUtils.hasAuth(to.meta.auth)) { // 需要验证当前路由否有权限,没有跳404,有就继续走
next('/404')// 无权限跳404
NProgress.done()
} else {
next()
NProgress.done()
}
}
} else {
if (AUTH_WHITE_LIST.indexOf(to.path) !== -1) { //在白名单中就继续正常走
next()
} else if (to.matched.length === 0) {
next('/401')// 未知页面调错误也
} else {
// 没有登陆,不在白名单里,重定向到登陆页
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => { //跳转完成,进度条结束
// 完成进度条
NProgress.done()
})
关键字解释:
- to.match---》to.matched数组,该数组中保存着匹配到的所有路由信息-------->用to.matched而不直接用to.meta 是因为前者只需要给较高一级的路由添加Auth(权限)即可,其下的所有子路由不必添加。
- replaceState---》修改了对应的store历史记录,更新store
Object.assign()
- Object.assign()----》将所有可枚举属性的值从一个或多个源对象复制到目标对象,然后返回目标对象
- Object.assign()---》是ES6新添加的接口,主要的用途是用来合并多个JavaScript的对象。
- Object.assign()-----》接口可以接收多个参数,第一个参数是目标对象,后面的都是源对象,assign方法将多个原对象的属性和方法都合并到了目标对象上面,如果在这个过程中出现同名的属性(方法),后合并的属性(方法)会覆盖之前的同名属性(方法)。