权限控制

1.1 什么是权限管理？

根据用户的角色权限，显示能操作的模块，就是权限管理，也叫权限控制

后端实现权限控制：将所有导航菜单全部入库，根据用户的权限，读取对应的导航菜单，作为接口数据返回给前端，前端再根据数据渲染出导航栏。大部分的项目都是后端进行权限控制。

前端实现权限控制：将路由线路拆分开，分成不同的权限可以访问到不同的路由，再根据路由模块渲染出导航栏，一般用于小项目。

扩展阅读：https://zhuanlan.zhihu.com/p/34608415

1.2 实现权限控制

思想：根据不同的角色，制作出不同的路由，实现显示不同的模块功能

第一步：将登陆后获取的角色信息存储到本地

//在login登陆模块中，登陆成功以后，将角色信息存储到本地
local.set('role', res.data.role);

第二步：根据不同的角色，生成不同的路由

//在router/index.js中，重新配置路由，根据不同的角色生成不同的路由
//拆分路由，将路由分成不同的角色
function showRouter(){
  let role=local.get('role');
  if(role==='super'){
    return [...normalRoutes, ...superRoutes];
  }else{
    return normalRoutes;
  }
}

const router = new VueRouter({
  routes: showRouter(), //根据角色生成不同的路由
})

第三步：根据路由生成导航栏

//1. 获取路由线路
import {showRouter} from '@/router/index.js'
export default {
    data(){
        return {
            routers: showRouter(), //路由线路数组
        }
    },
}

//2. 排除不需要生成导航的路由，使用数组的过滤函数进行排除，在路由上添加 isMenu 标志
data(){
  return {
    routers: showRouter().filter(v=>v.isMenu), //筛选留下具备 isMenu的路由
  }
},//1. 获取路由线路
import {showRouter} from '@/router/index.js'
export default {
    data(){
        return {
            routers: showRouter(), //路由线路数组
        }
    },
}

//2. 排除不需要生成导航的路由，使用数组的过滤函数进行排除，在路由上添加 isMenu 标志
data(){
  return {
    routers: showRouter().filter(v=>v.isMenu), //筛选留下具备 isMenu的路由
  }
},

<!-- 3. 根据路由数组渲染出导航栏-->
<template v-for="(v,i) in routers">
  <!-- 一级菜单 -->
  <el-menu-item :index="v.path" v-if="v.children.length<=1" :key="i">
    <i :class="v.icon"></i>
    <span slot="title">{{v.meta.title}}</span>
  </el-menu-item>

  <!-- 二级菜单 -->
  <el-submenu :index="v.path" v-else :key="i">
    <template slot="title">
      <i :class="v.icon"></i>
      <span>{{v.meta.title}}</span>
    </template>
    <el-menu-item v-for="(v2, i2) in v.children.filter(v3=>v3.isMenu)" :index="v2.path" :key="i2">{{v2.meta.title}}</el-menu-item>
  </el-submenu>
</template>

问题1：完善路由的图标

//在一级路由上添加图标
{
    path: '/count',
    component: () => import('../views/index/Layout.vue'),
    redirect:'/count/goods',
    meta:{title:'销售统计'},
    isMenu:true,
    icon:'el-icon-pie-chart', //小图标的类名
    children:[...]
},

//在生成导航时生成图标
<el-menu-item :index="v.path" v-if="v.children.length<=1" :key="i">
    <i :class="v.icon"></i>
    <span slot="title">{{v.meta.title}}</span>
</el-menu-item>

问题2：刷新路由

//在登陆成功后 login.vue，刷新一次路由
//跳转到首页，一定要等待
await this.$router.push('/index');

//刷新一次，重新加载路由
window.location.reload();