vue 按用户权限显示内容

 

web项目中,不同的用户登录网站显示的内容也会不同,那前端小伙伴应该怎么去设置呢?这里我以导航栏为例,其他其他内容的话也大同小异。

一、获取用去权限

这个最重要的一步。因为要设置权限,所以用户数据中当然有权限的分级。所以在vue初始化的时候获取用户权限。

created () {
//获取当前登录用户信息
this.$commonReq("/fireworks/user/info", null, (data) => {
	this.userInfo = data;
	setUserInfo(data);

	//初始化菜单和路由
	this.initMenuAndRoute();
});
},

二、判断权限

获取了用户信息之后就可以对其判断用户权限。我这里用了ES6的写法,权限字段 role_type 自动匹配用户信息this.userInfo数组里面的字段做判断。如果role_type是管理员就可以看全部菜单,否则只能看首页。

initMenuAndRoute () {
//更新菜单和路由
let {
role_type
} = this.userInfo;
if (role_type <= 1) {
this.menuList = [
	{ id: 1, name: '首页', type: 1, url: '/home', disabled: true },
	{ id: 4, name: '视频实时监控', type: 1, url: '/manageCenter/deviceManage' },
];
} else {
this.menuList = [
	{ id: 1, name: '首页', type: 1, url: '/home', disabled: true },
];
}
},
本文为博主原创文章,知识共享,开源精神,转载注明出处。