检查状态中的角色是否与逗号分隔列表中的要求匹配

Question

我有这个 vuex 状态

const state = {
    clientSide:{
        iata:'',
        currencyrates:''
    },
    auth:{
        userid:'',
        token_string:'',
        full_names:'',
        email:'',
        role:'',
        loggedin_status:'',
        language:'en',
        currency:'USD',
        application_name:''
    }
};

export default state

我是这样更新的

this.$store.state.auth = response.data;

认证成功后。我这样设置状态数据

{"userid":"6373773738","token_string":"ykBYlKQz5.w3l0JRkMat8uL7nEW5Zxb4LUrxahVAIrNzPZDQDv1zO","full_names":"Josh Does","email":"account@gmail.com","role":"admin","loggedin_status":"loggedin","language":"string","currency":"USD","application_name":"box_overflow"}

我想确保，用户只能访问 his/her 角色允许的路由，这是一些路由

{
    path: '/view-review',
    name: 'view-review',
    meta: { title: 'View Review', requiresAuth: true, rolesAllowed: 'guest,admin,marketer', loginPage: '/user_login' },
    component: () => import('../views/View_Review.vue')
  },
  
    {
    path: '/write-review',
    name: 'view-review',
    meta: { title: 'Write Review', requiresAuth: true, rolesAllowed: 'end_user,admin,marketer',  loginPage: '/staff_login' },
    component: () => import('../views/Write_Review.vue')
  },

在我的路由器中

router.beforeEach((to, from, next) => {

document.title = to.meta.title
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (store.state.auth.loggedin_status === 'loggedin' && store.state.auth.role is_in  record.meta.rolesAllowed) {
        
      next();
      return;
    }
    window.location.replace(record.meta.loginPage);
  } else {
    next();
  }
});

vue router 是否能够检查角色是否存在于逗号分隔的允许角色列表中，例如下面的伪代码

store.state.auth.loggedin === 'loggedin' && store.state.auth.role is_in  record.meta.rolesAllowed

Answer 1

您可以先将角色列表转换为数组，然后遍历查找给定的角色。

record.meta.rolesAllowed
   .split(',') // convert string to array by ',' char
   .includes(store.state.auth.role) // check if given role is in array

如果 record.meta.rolesAllowed 相当长，您可以先将其转换为 Set，然后调用 has(store.state.auth.role)。

检查状态中的角色是否与逗号分隔列表中的要求匹配

Checking if a role in state matches the required in a comma seperated list

javascript

vue.js

vue-router