Vue 监听路由及权限设置

账号权限设置，该页面无权限时跳转404页面

roles = ['超级管理员', 'formManage', 'userManage', 'workGS', 'workScoreDetails', 'workReportDetails']
1

computed: {
    ...mapGetters(["roles"])
  },
watch: {
    $route: {
      // $route可以用引号，也可以不用引号
      async handler(to, from) {
        console.log("当前权限：", this.roles);
        console.log("当前页面路由：" + to?.name);
        console.log("上一个路由：" + from?.name);
        //获取用户权限
        await this.$store.dispatch("user/getInfo");
        if (to.meta && to.meta.roles) {
          // 多权限处理处理
          let flag =  this.roles.some(item => {
            return to.meta.roles.some(sub => {
              return sub === item;
            });
          });
          if(!flag){
            this.$router.push({name:'Page404'})
          }
        } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23