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

Question

我已经加载了登录后加载侧边栏的所有权限，并更新了getter。我可以从侧边栏组件访问所有权限。 现在我想访问中间件中的所有权限。可能吗？怎么办？ 请提出建议。

这是我的权限存储：

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'
}

Answer 1

我看不到您在哪里调度userPermission操作以加载权限，但我假设您只是在中间件运行后才调用它的地方调度它。因此，在您运行中间件时，权限可能尚未加载。您可能希望在中间件中调度权限，等待它完成，然后才检查权限。例如：

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