在这篇博客中,我将会详细介绍这个博客搭建的第二个技术要点:
页面访问权限
我们知道,对于这个博客而言。后台是游客不可访问的,前台是公开的。那么如何区分开来呢?
给页面设置meta属性
对于每个页面,如果是公开的页面,则设置{auth:false}
,意为没有权限。
如果是私有页面,则不设置auth属性。
每次页面路由变化时,会触发路由的beforeEach方法
router.beforeEach(({meta,path},from,next)=>{
store.dispatch('showProgress',0);
// NProgress.start();
let {auth=true}=meta //meta为false则auth为false;否则auth为true
let isLogin = Boolean(store.state.token) //转换为true or false
/*
访问不需要权限的设置meta:false
注册也要设置成meta:false
*/
//访问的是需要权限的页面且没有登录
if(auth&&!isLogin){
return next({path:'/login'});
}
// 如果登录了以后再访问reg和login则路由到Home
if(isLogin&&(path=='/login'||path=='/reg')){
return next({path:'/admin'});
}
// 未登录的情况下访问reg则直接路由
next();
});