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 },
];
}
},