7-8 权限管理之动态返回菜单的实现

目录:

• 更改路由表：根据是否需要权限的路由分类
• vuex中补充mutation： 保存菜单、动态添加菜单
• 生成路由的时机：登录时、刷新时

一、更改路由表

首先根据路由权限分类，这个在我们的permission.js中设置

import Mock from 'mockjs'
export default {
  getMenu: config => {
    const { username, password } = JSON.parse(config.body);
    console.log(JSON.parse(config.body));
    // 先判断用户是否存在
    if (username === 'admin' || username === 'wp') {
      // 判断账号和密码是否对应
      if (username === 'admin' && password === '123456') {
        return {
          code: 20000,
          data: {
            menu: [
              {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/Home'
              },
              {
                path: '/video',
                name: 'video',
                label: '视频管理页',
                icon: 'video-play',
                url: 'VideoManage/VideoManage'
              },
              {
                path: '/user',
                name: 'user',
                label: '用户管理页',
                icon: 'user',
                url: 'UserManage/UserManage'
              },
              {
                label: '其他',
                icon: 'location',
                children: [
                  {
                    path: '/page1',
                    name: 'page1',
                    label: '页面1',
                    icon: 'setting',
                    url: 'Other/PageOne'
                  },
                  {
                    path: '/page2',
                    name: 'page2',
                    label: '页面2',
                    icon: 'setting',
                    url: 'Other/PageTwo'
                  }
                ]
              }
            ],
            token: Mock.Random.guid(),
            message: '获取成功'
          }
        }
      } else if (username === 'wp' && password === '123456') {
        return {
          code: 20000,
          data: {
            menu: [
              {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/Home'
              },
              {
                path: '/video',
                name: 'video',
                label: '视频管理页',
                icon: 'video-play',
                url: 'VideoManage/VideoManage'
              }
            ],
            token: Mock.Random.guid(),
            message: '获取成功'
          }
        }
      } else {
        return {
          code: -999,
          data: {
            message: '密码错误'
          }
        }
      }
    } else {
      return {
        code: -999,
        data: {
          message: '用户不存在'
        }
      }
    }
  }
}

因为设置为动态路由，所以我们的 router.js 只保留 Login.vue的路由。

//登录组件
const Login = () => import('@/views/Login/Login.vue')

let routes = [
  // 由于是动态路由，所以在 permission.js配置了，就不需要配置静态路由
  {
    path: '/login',
    name: 'login',
    component: Login
  }
];

export default routes;

二、vuex中补充mutation

vuex中补充mutation： 保存菜单、动态添加菜单，所以编辑tab.js

import Cookie from 'js-cookie'  //导入js-cookie,导入时需要npm install js-cookie
const state = {
  currentMenu: null,
  .....
};

const mutations = {
  ....,
  setMenu(state,val){  //设置菜单
      state.menu = val;
      Cookie.set('menu',JSON.stringify(val));
  },
  clearMenu(state){ //退出登录的时候，需要清除cookie
    state.menu = [];
    Cookie.remove('menu')
  },
  addMenu(state,router){  //添加菜单
    if(!Cookie.get('menu')){
      return
    }
    let menu = JSON.parse(Cookie.get('menu'));
    state.menu = menu;
    let currentMenu = [
      {
        path: '/',
        component: () => import(`../../views/Main`),
        children: []
      }
    ];
    menu.forEach(item => {
      if(item.children) {
        item.children = item.children.map(item => {
          item.component = () => import(`../../views/${item.path}`);  //ES6的写法，${item.url} 获取变量
        });
        currentMenu[0].children.push(...item.children); //3个点表示children 子路由需要展开
        console.log(currentMenu[0].children);
      }else {
        item.component = () => import(`../../views/${item.url}`);
        currentMenu[0].children.push(item)
      }
    });
    console.log(currentMenu);
    router.addRoutes(currentMenu);  //添加动态路由
  }
};
export default {
  state,
  mutations
}

这边需要注意的是，我这边这边mock的cookie需要安装并且引入js-cookie

> npm install js-cookie

三、生成路由的时机

生成路由的时机：登录时、刷新时，编辑 Login.vue 组件：

<template>
  <div style="padding: 20px">
    <el-form :model="form" label-width="120">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      this.$http.post('api/permission/getMenu', this.form).then(res => {
        res = res.data;
        if(res.code === 20000 ) {
          this.$store.commit('clearMenu');//防止二次登录，先清理cookie
          this.$store.commit('setMenu',res.data.menu);
          this.$store.commit('addMenu',this.$router);
          this.$router.push({name: 'home'});  //路由跳转到 home目录
        }else{
          this.$message.warning(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-form {
    width: 50%;
    margin: auto;
    padding: 45px;
    height: 450px;
    background-color: #fff;
  }
</style>

这边需要注意的是：初始化的时候需要在main.js文件中 加入菜单：

/* eslint-disable no-new */
new Vue({
  ....,
  created(){
    store.commit('addMenu',router)   //初始化的时候，需要把菜单进来
  }
}).$mount('#app');