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,及时联系---------------------------------------------------------------------------------------------------------------------------------------------------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章