js React Dva对页面中权限节点的控制 即有权限展示和无权限的不展示

思路:有些界面和操作按钮有着对应唯一的权限码,当用户登录之后会获取到用户向前所拥有的权限码。然后跟整个系统的权限码进行比对,如果存在对应的权限码则拥有该权限。

步骤:

1,在permission.js中存放整个系统的权限码

2.登录成功后获取到当前用户拥有的权限列表,并使用localStorage本地存储起来

window.localStorage.setItem('auth', JSON.stringify(auth));

3.在auth.js中编写当前权限码与系统权限码是否匹配

const isAuth = authId => {

if (authId === undefined || authId === null) {

return true;

}

let ids = [];

// 可能是个数组

if (authId.length) {

ids = ids.concat(authId);

} else {

ids.push(authId);

}

// 获取当前用户所拥有的权限列表

let authIds = JSON.parse(window.localStorage.getItem("auth")) || [];

// 循环判断是否匹配

for (const userAuthId of ids) {

for (const id of authIds) {

if (userAuthId === id) {

return true

}

}

}

return false;

};

export { isAuth };

使用:

如在新增按钮设置权限:

{isAuth(Permission.postManage.addPost)) === true ? <Button onClick={this.handleAddPost}>新增</Button> : ''}

isAuth返回值为true就显示新增按钮 false就不显示

-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到问题:+WX:WAZJ-0508,及时联系---------------------------------------------------------------------------------------------------------------------------------------------------

发布了58 篇原创文章 · 获赞 41 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/Zeng__Yi/article/details/89473287