Angular：使用属性控制不同状态的登录用户看到不同的菜单

最新推荐文章于 2021-05-17 09:32:29 发布

Angular baby

最新推荐文章于 2021-05-17 09:32:29 发布

阅读量1.7k

点赞数

分类专栏：前端开发 Angular6基础学习文章标签： Angular json ts

本文链接：https://blog.csdn.net/qq_36451496/article/details/84859653

版权

前端开发同时被 3 个专栏收录

142 篇文章 3 订阅

订阅专栏

Angular6基础学习

59 篇文章 5 订阅

订阅专栏

Angular6

52 篇文章 0 订阅

订阅专栏

1.在主页的json文件中（menu.json）给左侧目录树中的各个节点添加一个isShow属性：

{

"code": "200",

"msg": "Success",

"_commment": "菜单接口",

"datas": [

{

"id": "1",

"menuCode": "10",

"menuName": "首页",        ------一级节点

"menuRoute": "home",

"isExpand": false,

"icon": "anticon-setting",

"hasChild": false

},

{

"id": "2",

"menuCode": "20",

"menuName": "商户管理",     ----一级节点

"menuRoute": "",

"isExpand": false,

"icon": "anticon-setting",

"isShow": false,

"hasChild": true,

"childMenu": [

{

"id": "210",

"menuCode": "210",

"menuName": "基础信息维护",    -----二级节点

"menuRoute": "commercial/list",

"isExpand": false,

"icon": "anticon-setting",

"hasChild": false

}

]

},

2.在主页的组件中，在加载页面左侧菜单栏的方法中控制根据用户的状态进行菜单的过滤：

这里我的登录状态是调用后台接口传输过来供我判断的：用this.globalProvider.loginInfo中传递登录信息；

使用filter过滤出符合条件的菜单数据

ngAfterViewInit() {

this.http.get('../../../assets/datas/menu.json').subscribe(res => {

this.menus = res['datas'];



const merchantStatus = this.globalProvider.loginInfo.merchantStatus;                 // 用户状态：是否审批通过

if (merchantStatus === '2') {                                // 如果没有审批通过

this.menus = this.menus.filter(menu => {

const isShow = _.get(menu, 'isShow', true);

return isShow === true;

});

}



// 解决Angular 脏检查错误

this.cdr.detectChanges();

});

3.在登录的服务中将用户的状态传进来：

/**

* 保存登录的信息

* @param res

* @param params

*/

private loginSuccess(res, params) {

this.globalData.loginInfo = {

username: params.username,

password: params.password,

captcha: params.captcha,

// 用户的状态传进来塞到loginInfo中

merchantStatus: res.data.merchantStatus,



};

this.tokenProvider.token_white(JSON.stringify(res.data));

this.tokenProvider.setRefreshTime(); // 设置刷新时间（当前时间)

}