后台管理中如何实现权限管理

在项目后台管理项目开发中经常会遇到权限的功能，今天我就好好整理一下，如何实现权限管理。
权限管理：通过角色分配权限
接下来时具体实现的步骤
1，创建vue脚手架
2，创建组件，并匹配路由规则

备注：rights文件夹下是侧边栏的子路由，通过动态路由addRoutes获取，后面会写如何是实现；sideBar.vue是侧边栏组件，注册为Home的私有组件

//route/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
   
    path: '/',
    name: 'login',
    component: () => import( '../components/Login.vue'),
  },
  {
   
    path: '/home',
    name: 'home',
    component: () => import( '../components/Home.vue'),
  },
]

const router = new VueRouter({
   
  routes
})

export default router

3，在login组件里面写登录业务逻辑

//login页面，视图层代码
<template>
  <div>
    <form>
      <div>
        <label>用户名</label>
        <input type="text" v-model="userInfo.username" placeholder="请输入用户名">
      </div>
      <div>
        <label>密码</label>
        <input type="text" v-model="userInfo.password" placeholder="请输入密码">
      <