vuejs+koa2+mysql全栈开发个人博客(三) —— 页面访问权限

在这篇博客中,我将会详细介绍这个博客搭建的第二个技术要点:
页面访问权限

我们知道,对于这个博客而言。后台是游客不可访问的,前台是公开的。那么如何区分开来呢?

给页面设置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();
});

你可能感兴趣的:(前端项目)