如何在 Vue 自定义中间件中获取 Vuex 更新的 getters 值以进行权限检查?

Posted

技术标签:

【中文标题】如何在 Vue 自定义中间件中获取 Vuex 更新的 getters 值以进行权限检查?【英文标题】:How to get Vuex updated getters value in Vue custom middleware for permission check? 【发布时间】:2020-01-02 21:18:18 【问题描述】:

登录后加载侧边栏并更新获取器时,我已加载所有权限。我可以从侧边栏组件访问所有权限。 现在我想访问我的中间件中的所有权限。是否可以?该怎么办? 请给个建议。

这是我的权限存储:

const state = 
    permissions: [],
    user: [],
  
  const getters = 
    getPermissions: state => state.permissions,
    getUserInfo: state => state.user,
  
  const actions = 
      userPermission(commit, data)           
        if (data != null) 
            axios.get("/api/auth/user", params:  token: data.token)
            .then(res => 
                const per = res.data.data.permissions;                
                commit("setPermissions", per);
                // console.log(res.data.data.permissions);
            )
            .catch(err => 
                console.log(err);            
            );
        
      ,
      userInfo(commit, data)           
        if (data != null) 
            axios.get("/api/auth/user", params:  token: data.token)
            .then(res => 
                const info = res.data.data.user;                
                commit("setUserInfo", info);
                // console.log(res.data.data.user);
            )
            .catch(err => 
                console.log(err);            
            );
        
      ,
   
  const mutations = 
    setPermissions(state, data) 
        state.permissions = data;
    ,
    setUserInfo(state, data) 
        state.user = data;
    
  
  export default 
    state,
    getters,
    actions,
    mutations
  

这里是中间件函数:

import store from '../store';
export default (to, from, next) => 
    if (isAuthenticated())         
        if (!hasPermissionsNeeded(to)) 
            next('admin/permission-denied');
         else 
            next();
        
        next();
     else 
        next('/admin/session/login');
    
;
function isAuthenticated() 
    if (localStorage.getItem("userInfo") != null && localStorage.getItem("userInfo").length > 0) 
        return true;
     else 
        localStorage.removeItem("userInfo");
        return false;
    
;
function hasPermissionsNeeded(to) 
    var permissions = store.getters.getPermissions;
    if(permissions.includes(to.meta.permissions) || to.meta.permissions == '*') 
        return true;
     else 
        return false;
    
;

这里是路由逻辑:

path: "/admin/country",
    component: () => import("./views/admin/country/country"),
    beforeEnter: authenticate,
    meta : 
      permissions: 'browse country'
    

【问题讨论】:

【参考方案1】:

我看不到您将userPermission 操作分派到哪里来加载权限,但我假设您只是将它分派到仅在中间件运行后才被调用的地方。所以看起来权限可能在您运行中间件时尚未加载。您可能希望在中间件中分派权限,等待它完成,然后才检查权限。例如:

export default (to, from, next) => 
    store.dispatch('userPermission').then(() => 
        if (isAuthenticated()) 
        ...
    )

【讨论】:

以上是关于如何在 Vue 自定义中间件中获取 Vuex 更新的 getters 值以进行权限检查?的主要内容,如果未能解决你的问题,请参考以下文章

如何自定义 laravel api 的 json 响应并在 vuex 中显示它们

Vue 看不到我的对象从 vuex 获取的更新

Vuex持久化 &vue组件设置背景色

自定义vue全局组件use使用vuex的使用

vue vuex:显示可更新状态

vuex 初始化中间件怎么使用