如何在 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 值以进行权限检查?的主要内容,如果未能解决你的问题,请参考以下文章