vue2.x项目从0到1（七）之用户权限

此章节偏理论知识

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

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

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

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

<template>
  <div class="aside">
    <div class="logoname" v-if="!isCollapse">医疗机构后台管理系统</div>
    <div class="logoname" style="font-size: 30px" v-else>医</div>
    <el-scrollbar :vertical="true" style="height: calc(100vh - 80px);margin-right: 0;overflow: hidden">
      <div class="wrap">
        <el-menu :key="update" unique-opened :default-active="defaultActive" background-color="#000D3C" text-color="#fff"
          active-text-color="#fff" :collapse="isCollapse" active-background-color="#409EFF">
          <div v-for="(item, index) in tree" :key="index">
            <el-submenu :index="item.menuName" v-if="item.children">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span v-show="!isCollapse">{
   
   { item.menuName }}</span>
              </template>
              <el-menu-item v-for="(nth, idx) in item.children" :key="idx" :index="nth.menuURL" @click="goRouter(nth)">{
   
   {
                nth.meta.title }}</el-menu-item>
            </el-submenu>
            <el-menu-item :index="item.menuURL" v-else @click="goRouter(item)">
              <i class="el-icon-menu"></i>
              <span slot="title">{
   
   { item.menuName }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
    </el-scrollbar>
  </div>
</template>

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

vue2.x项目从0到1（七）之用户权限

猜你喜欢