vue全局前置路由守卫，禁止用户访问未授权的页面

路由守卫，顾名思义要写在路由里面，挂在路由实例router上

这次我们要实现这样的效果

如果用户试图通过地址栏访问未授权的管理员界面

我们要阻止跳转

使用router.beforeEach来注册全局守卫，内部回调函数可以接受3个参数

to：准备前往的地址

from：准备离开的地址

next的用法是

next();

//跳转指定位置
next({ path: "/login", query: { ReturnUrl: to.fullPath } })

//不跳转
next(false)

知道这些，我们就可以开始书写前置路由守卫的逻辑

首先，白名单是所有人都可以访问的

然后，我们需要在vuex中拿到用户的等级，以及被允许访问的地址列表checkedkeys

判断即将前往的to.path是否在该名用户的地址列表中，如果在就允许访问

如果不在就拒绝访问。

这样做可以避免用户访问到未授权的页面。

注意：在我们拿到数据之前， 应该将数据同步给vuex，这个操作只要做1次即可。

代码：

let whiteList = ["/login", "/404"];
let count = 1;
router.beforeEach((to, from, next) => {
  
  if (!whiteList.includes(to.path)) {
    //确保同步vuex的代码仅会执行1次

    if (count == 1) {
      store.dispatch("initAndUpdateUserInfo");
      count++;
    }
    let isLogin = store.getters.isLogin;
    let { role, checkedkeys } = store.state.userInfo;
    if (isLogin) {
      if (role == 1 || checkedkeys.includes(to.path)) {
        next();
      } else {
        next(false);
        Message.warning("暂无权限");
      }
    } else {
      next({ path: "/login", query: { ReturnUrl: to.fullPath } });
    }
  } else {
    next();
  }
});