路由导航的时候判断，【每次路由跳转的时候都会调用角色权限的接口】

main.js

  const menuList = store.state.menuList;  //将这写在外层导致页面循环卡死，因为路由守卫都会进入这个，每次menuLis都初始化为vuex里空数组，导致menuLis的length都是0,循环卡死，小错误导致我找了好久还是另寻他们帮忙

  
router.beforeEach(async (to, from, next) => {
  const role = common.getCookie("supply_token");
  const menuList = store.state.menuList;
  if (role) {
    // 登录状态
    if (to.path == "/login") {
      next("/");
    } else {
      // 查看是否存在动态menu等用户信息 不存在则获取动态菜单数据
      console.log(menuList, typeof menuList);
      if (menuList.length == 0) {
        await store.dispatch("getMenuPermission");
        next({ ...to, replace: true });
      } else {
        next();
      }
    }
  } else {
    // 当前用户 未登录
    if (to.path == "/login") {
      next();
    } else {
      next("/login");
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

总结如下：
1.menuList没有用localStorage保存，所以vuex一刷新页面的时候数据就是空数组，进入【menuList.length == 0】条件里调用接口【角色权限的接口】

2.因为你是保存在vuex的 你没做vuex持久化， 你刷新一下 之前vuex保存的数据 就没啦，就命中 那个请求的判断了啊

逻辑思路如下：

1.不登录的时候 一般都是跳转login呀或者可以维护一个白名单理由数组
2.不登录的时候 判断当前路由是否存在 白名单数组里，存在 则直接next啊，不存在 说明是需要登录的呀 直接跳转登录
3.登录状态下 也就是刷新的时候 或者是登录进来 还没请求权限数组的时候
4.先在vuex完成权限获取 权限菜单生成相关操作 然后next({…to, ,.,})

本来想在app.vue的mounted里调用接口【但是不太友好不推荐这样还是放在路由拦截里】

  async mounted() {
    // await this.$store.dispatch("getMenuPermission");
  },
1
2
3