后台管理系统——角色分配、粘贴地址跳转至404以及角色分配控制按钮权限

import store from '../store/index' // 引入vuex
const userRoute ={
  path: 'role',
  name: 'role',
  meta:{title:"角色管理"},
  component:() => import('../views/Role.vue')
}

const userR ={
  '/role':userRoute
}

export function infoUserRoute() {
  console.log(router.options.routes);
  let routes = router.options.routes
  var rightlist = store.state.user.navBar.list
  console.log(rightlist);
  console.log(routes);
  rightlist.forEach(v=>{
  if (v.name == '首页') {
    v.leftMenus.forEach(item=>{
    // console.log(item);
    const temp = userR[item.key]; // 角色管理页面单独提取出来
    if (temp) {
      console.log(temp); //{path: "/role", name: "role", meta: {…}, component: ƒ}
      routes[0].children.push(temp)// 九个数组中添加一个角色管理
      routes[0].children.forEach(res=>{
      router.addRoute('Home',res) //addRoutes可以实现路由添加的功能，事实上就也就实现了用户权限。
      console.log(res);
      })
    }
    })
  }
  })
}

router.addRoutes(routes: Array<RouteConfig>)

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
import {infoUserRoute} from './router/index';
export default {
  name: 'app',
 created(){
   infoUserRoute()
 }
}
</script>
<style>
* {margin:0;padding:0;}
</style>

// 这里再写一个动态404页面
const userRouteTwo = {
  path: '*',
  name: 'NotFound',
  component:() => import('../views/NotFound.vue')
}
export function infoUserRoute() {
  let routes = router.options.routes
  routes.push(userRouteTwo)
  router.addRoute(userRouteTwo)
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Welcome from '../views/Welcome.vue'
import User from '../views/User.vue'
import Category from '../views/Category.vue'
import User2 from '../views/User2.vue'
import Products from '../views/Products.vue'
// import Role from '../views/Role.vue'
import Bar from '../views/Bar.vue'
import Line from '../views/Line.vue'
import Pie from '../views/Pie.vue'
import store from '../store/index'
Vue.use(VueRouter)
const userRoute ={
  path: 'role',
  name: 'role',
  meta:{title:"角色管理"},
  component:() => import('../views/Role.vue')
}
// 这里再写一个动态404页面
const userRouteTwo = {
  path: '*',
  name: 'NotFound',
  component:() => import('../views/NotFound.vue')
}
const userR ={
  '/role':userRoute
}
const routes = [{
  path: '/',
  name: 'Home',
  component: Home,
  redirect: '/welcome',
  children: [{
    path: '/welcome',
    name: 'welcome',
    component: Welcome
    },
    {
    path: 'user',
    name: 'user',
    meta:{title:"用户管理"},
    component: User,
    },
    {
    path: '/category',
    name: 'category',
    meta:{title:"品类管理"},
    component: Category
    },
    {
    path: '/product',
    name: 'product',
    meta:{title:"商品生产"},
    component: Products
    },
/*    {
    path: '/role',
    name: 'role',
    meta:{title:"角色管理"},
    component: Role
    }, */
    {
    path: '/charts/bar',
    name: 'bar',
    meta:{title:"柱状图"},
    component: Bar
    },
    {
    path: '/charts/line',
    name: 'line',
    meta:{title:"折线图"},
    component: Line
    },
    {
    path: '/charts/pie',
    name: 'pie',
    meta:{title:"饼图"},
    component: Pie
    },
    {
    path: '/user2',
    name:'user2',
    meta:{title:'用户管理2'},
    component: User2
    },
  ]
  },
  {
  path: '/about',
  name: 'About',
  component: () => import('../views/About.vue')
  },
  {
  path: '/login',
  name: 'Login',
  component: () => import('../views/Login.vue')
  }
]
const router = new VueRouter({
  routes,
  mode: 'history'
})
export function infoUserRoute() {
  console.log(router.options.routes);
  let routes = router.options.routes
  var rightlist = store.state.user.navBar.list
  console.log(rightlist);
  console.log(routes);
  rightlist.forEach(v=>{
  if (v.name == '首页') {
    v.leftMenus.forEach(item=>{
    // console.log(item);
    const temp = userR[item.key]; // 角色管理页面单独提取出来
    if (temp) {
      console.log(temp); //{path: "/role", name: "role", meta: {…}, component: ƒ}
      routes[0].children.push(temp)// 九个数组中添加一个角色管理
      routes[0].children.forEach(res=>{
      router.addRoute('Home',res)
      console.log(res);
      })
    }
    })
  }
  })
  routes.push(userRouteTwo)    //分配404页面
  router.addRoute(userRouteTwo)
}
// 导航守卫通过login页面判断有无token值，没有不允许放行
router.beforeEach((to,from,next)=>{
  if (to.path== '/login') {
  next()
  }else {
  let token = window.sessionStorage.getItem('token')
  if (!token) {
    next('/login')
  }else{
    next()
  }
  }
})
const originalPush = VueRouter.prototype.push
// 重写了原型上的push方法，统一的处理了错误信息
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
export default router

if (temp) {temp.meta.rights = item.rights // 添加vuex中的rights数组放到meta.rights中
      console.log(temp); //{path: "/role", name: "role", meta: {…}, component: ƒ}
      routes[0].children.push(temp)// 九个数组中添加一个角色管理
      routes[0].children.forEach(res=>{
        router.addRoute('Home',res)
        console.log(res);
      })
      }

{
      id: 3,
      title: '角色管理',
      key: '/role',
      name: 'role',
      icon: 'el-icon-s-custom',
      rights: ['view', 'edit', 'delete']
      },

import Vue from 'vue'
import router from '@/router/index.js'
Vue.directive('Directive', {
    inserted(el, binding) {
        console.log(el); // 元素标签
        console.log(binding);   //value:action: "add" effect: "disbaled"
        var action = binding.value.action
        console.log(action);
        var effect = binding.value.effect
        console.log(router.currentRoute.meta); //meta: {title: "用户管理"}
        console.log(effect); //
        if (router.currentRoute.meta.rights.indexOf(action) === -1) {  // 查找到有没有action这个属性
            if(effect === "disabled"){
    }else {
                el.disabled = true;
                el.classList.add('is-disabled')
    // el.parentNode.removeChild(el)
    }
        }else{
        }
    },
});

<el-button type="primary"  v-Directive="{action:'add',effect:'disbaled'}">添加商品</el-button>