Vue权限管理

前言

博主最近刚刚上手一个图书管理系统的小Demo，在编写的过程中遇到了许多的问题，尤其是对于我这样的新手来说权限管理是一个难点，本身对Vue就不是很理解，所以查阅了许多的文章后才有一点点思路，所以在这里记录下来，也希望其他的小白也能够少走一些弯路。

我大概的思路是这样的

首先，我们我们有两种用户，一个admin（管理员），一个user（普通用户），他们所看到的界面都是不一样的
第一步：我们将一些公用的组件提取出来制作成一个静态路由表，其他需要有权限的展示的组件我们把他制作成动态的路由表
第二步：当我们登录的时候获取用户的身份，然后我们遍历动态路由表，动态的生成路由表

是不是这样就感觉简单很多了呢，下面我们来建立一个一个简单的demo吧！先看一下我的结构图

error------错误组件（当路径错误时显示）
login------登录组件
home------普通用户界面
home--------管理员界面

我们首先去定义一个路由表

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: (resolve) => require(['../components/login.vue'], resolve)
    },
    {
      path: '/login',
      name: 'login',
      component: (resolve) => require(['../components/login.vue'], resolve)
    },
    {
      path: '/404',
      name: 'err',
      component: (resolve) => require(['../components/error.vue'], resolve)
    }
  ]
})
export default router;//我们把静态的路由表导出去

//我们使用meta标签来定义里面的权限
export const dynamicRouter = [
  {
    path: '/home',
    name: 'home',
    meta: {
      roles:['user']//表示只有user的权限才能够访问这个界面
    },
    component: (resolve) => require(['../components/home.vue'], resolve)
  },
  {
    path: '/home',
    name: 'home2',
    meta: {
      roles:['admin']
    },
    component: (resolve) => require(['../components/home2.vue'], resolve)
  },
];

下面就是我们的各个组件的定义了

最后就是我们的login组件了

<template>
  <div>
    <form>
      账户：<input type="text" :model="user">
      密码：<input type="text" :model="pass">
      <button @click="updateR">修改权限</button>
      <input type="button" value="登录" @click="Login">
    </form>
  </div>
</template>

<script>
  import {router,dynamicRouter} from '../router/index' //获取路由配置文件里的两个路由表
  export default {
    name: "login",
    data(){
      return{
        user:'',
        pass:'',
        roles:'user'
      }
    },
    methods:{
      Login(){
        let dR = new Array(); //创建一个数组用来存储符合权限的路由
        for (let i=0;i<dynamicRouter.length;i++){ //第一层循环遍历动态路由表的每一个路由
          for (let j=0;j<dynamicRouter[i].meta.roles.length;j++){ //第二次循环遍历每一个路由里的roles设置的权限并和当前登录账号的权限比较
            if (dynamicRouter[i].meta.roles[j] == this.roles){//此处因为没有后台我就把权限写死在data里面了
              dR.push(dynamicRouter[i]); //符合条件的路由信息就放进数组里
            }
          }
        }
        console.log(dR);
        this.$router.addRoutes(dR.concat([{ //动态添加符合条件的路由
          path: '*',
          redirect: '/404' //所有不匹配路径(*)都重定向到404
        }]));
        this.$router.push({path:'/home'}); //登录验证后跳转到主页home页面
      }
    },
    updateR(){
      if (this.roles === 'admin'){
        this.roles === 'user'
      } else{
        this.roles === 'admin'
      }
    }
  }
</script>

<style scoped>

</style>