vue2.x项目从0到1(七)之用户权限

此章节偏理论知识  

对于小一点的项目  比如说角色都是平级的  那我们直接像之前  vue2.x项目从0到1(二)之后台管理侧边栏(动态渲染路由以及高亮)_vue动态渲染侧边栏_关忆北_的博客-CSDN博客这样渲染就行了   但是一旦项目大了   就比如:有管理或者是经理  员工这种  有职级层次划分的项目就不好这么渲染了   因为前端做这种权限判断的话 要写大量的  v-if  而请求后端接口返回路由表的话  明显就方便很多

vue2.x项目从0到1(七)之用户权限_第1张图片

我们从项目登录页进来  肯定要调取登录接口吧  在这里我们获取到用户的  token  以及用户信息 userInfo 我们可以将这些东西储存到  vuex 里或者是 localStorage  里  两个都存也行  看个人习惯  然后每次请求的时候要把  token  添加到请求头里一起携带传过去  这个时候后端就是根据  token  知道是哪个用户在请求数据  从而返回相对应的路由列表  

vue2.x项目从0到1(七)之用户权限_第2张图片

 

稍微大点的项目  现在用的基本都是框架  比如:若依,他们都有那种  系统管理  用户管理 去配置这些配置项  配置好后  后端才能返还给你  配置好后在侧边栏文件里写上

created() {
    // 获取侧边栏的接口
    menuTree().then(({data}) => {
      this.tree = data.tree
    })
    // 高亮为当前路由所在
    this.defaultActive = this.$route.name;
},

上方 v-for 渲染 tree 里的数据即可做到用户权限控制

你可能感兴趣的:(vue2项目药品后台管理系统,vue.js,前端,javascript)