小白上路~ element-vue 根据用户角色改变左侧导航栏

使用 Element-UI 做左侧导航栏时，可以让后台管理端的功能模块一目了然，但是管理员角色不止一种怎么办？难道我要写很多个代码类似的后台管理系统吗？
答案当然是：不！跟着我来做一个可以根据角色来显示不同导航栏的后台管理系统吧！

1.数据库表中添加一个 role 字段用于区分管理员角色

2.用户登录后台管理后将用户角色保存到 session

关键语句： sessionStorage.setItem("role", user.role);

         this.axios({
   
            method: "post",
            url: "/getSuperAdmin",
            data: a,
          }).then(function (resp) {
   
            if (resp.data.message == "success") {
   
              // 从后台获取管理员信息
              // 赋值给 user
              var user = resp.data.user[0];
              // 将管理员角色 role 保存到 session
              sessionStorage.setItem("role", user.role);
              // 跳转到【系统主界面 main】
              // 这里 vm 是在this.axios({})外面定义的 var vm = this
              // 否则会和this.axios({})的this搞混，出现bug
              vm.$router.push("/main");
            }
          }

操作成功后，你将会看到（火狐浏览器 F12）：

3.判断当前登录管理员的角色

为了使用方便，将左侧导航栏封装成一个组件

3.1 src->components新建文件夹，如图。

3.2 跟着敲代码

<template>
    <el-menu
    router
    class="el-menu-vertical-demo"
    background-color="#56C18D"  底色
    text-color="#fff"   文字颜色 
    active-text