vue动态路由

菜单控制

登录成功保存一下信息（根据返回的权限信息渲染侧边栏）

this.$store.commit('setRightList', res.rights)//侧边栏权限信息
this.$store.commit('setUsername', res.data.username)//用户信息
sessionStorage.setItem('token', res.data.token)//token

界面控制

是否登录

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = sessionStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})

是否权限路由（动态路由）

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'
import Welcome from '@/components/Welcome.vue'
import Users from '@/components/user/Users.vue'
import Roles from '@/components/role/Roles.vue'
import GoodsCate from '@/components/goods/GoodsCate.vue'
import GoodsList from '@/components/goods/GoodsList.vue'
import test from '@/components/test/Test.vue'
import NotFound from '@/components/NotFound.vue'
import store from '@/store'

Vue.use(Router)

const userRule = { path: '/users', component: Users }
const roleRule = { path: '/roles', component: Roles }
const goodsRule = { path: '/goods', component: GoodsList }
const categoryRule = { path: '/categories', component: GoodsCate }

const ruleMapping = {
  'users': userRule,
  'roles': roleRule,
  'goods': goodsRule,
  'categories': categoryRule
}
const initRoutes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome },
      // { path: '/users', component: Users },
      // { path: '/roles', component: Roles },
      // { path: '/goods', component: GoodsList },
      // { path: '/categories', component: GoodsCate }
    ]
  },
  {
    path: '*',
    component: NotFound
  }
]
const router = new Router({
  routes: initRoutes
})


router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    const token = sessionStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})
/*
const userRule = { path: '/users', component: Users }
const roleRule = { path: '/roles', component: Roles }
const goodsRule = { path: '/goods', component: GoodsList }
const categoryRule = { path: '/categories', component: GoodsCate }

const ruleMapping = {
  'users': userRule,
  'roles': roleRule,
  'goods': goodsRule,
  'categories': categoryRule
}
*/
export function initDynamicRoutes() {
  // router.options.routes 初始化路由(默认)
  let currentRoutes = router.options.routes
  console.log(currentRoutes);
  // store.state.rightList 后端返回的 权限信息
  const rightList = store.state.rightList
  // let arr = []

  rightList.forEach(item => {
    item.children.forEach(item => {
      // ruleMapping 事先定义的动态路由
      const itemRule = ruleMapping[item.path]
      // item.rights 后端标识的用户权限
      itemRule.meta = item.rights//存储按钮权限信息挂载到路由的meta
      // currentRoutes[2].children 都添加到 home的子路由中
      currentRoutes[2].children.push(itemRule)//复合的全部push到路有列表的对应位置
      // arr.push(itemRule)
      // console.log(currentRoutes);
    })

  })
  // console.log(arr);
  // currentRoutes[2].children.push(...arr)


  // router.addRoutes(currentRoutes)
  router.addRoutes([...currentRoutes, { path: '/test', component: test },])//替换路由规则

  console.log(router.options.routes);


  /*
  {
            "id": 125,
            "authName": "用户管理",
            "icon": "icon-user",
            "children": [
                {
                    "id": 110,
                    "authName": "用户列表",
                    "path": "users",
                    "rights": [
                        "view",
                        "edit",
                        "add",
                        "delete"
                    ]
                }
            ]
        },
  */

}
// 退出清理动态路由
export function resetRouter() {
  const newrouter = new Router({
    routes: initRoutes
  })
  router.matcher = newrouter.matcher
}


export default router

登录逻辑中调用   和app的create中调用     initDynamicRoutes() // 动态添加

退出逻辑

logout() {
      console.log(1111);
      resetRouter()// 重置路由
      console.log(2222);
      sessionStorage.clear()
      window.location.reload()// 刷新页面
      console.log('this.$router.resetRoutes()');
      this.$router.push('/login')// 跳转到登录页
},

按钮控制

根据路由上的meta信息  在对应的按钮上如下

v-permission="{action:'edit', effect:'disabled'}"

import Vue from 'vue'
import router from '@/router.js'
// 自定义指令
Vue.directive('permission', {
  inserted: function (el, binding) {
    console.log(el, binding); // 当前使用的元素绑定的  绑定的数据
    //  v-permission="{action:'edit', effect:'disabled'}"
    //  ['view', 'edit', 'add', 'delete']meta信息

    const action = binding.value.action
    const currentRight = router.currentRoute.meta //获取当前路由的meta信息
    console.log(currentRight);
    if (currentRight) {
      console.log(123);
      if (currentRight.indexOf(action) == -1) {//不具备该权限的逻辑
        
        const type = binding.value.effect
        if (type === 'disabled') {//禁用操作
          el.disabled = true//element-ui禁用样式
          el.classList.add('is-disabled')//element-ui禁用样式
        } else {
          el.parentNode.removeChild(el)// 不具备权限隐藏按钮
        }

      }
    }

  }
})

请求响应控制

请求响应拦截器

import axios from 'axios'
import Vue from 'vue'
import router from '../router'
// 配置请求的跟路径, 目前用mock模拟数据, 所以暂时把这一项注释起来
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
const actionMapping = {
  get: 'view',
  post: 'add',
  put: 'edit',import axios from 'axios'
import Vue from 'vue'
import router from '../router'
// 配置请求的跟路径, 目前用mock模拟数据, 所以暂时把这一项注释起来
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
const actionMapping = {
  get: 'view',
  post: 'add',
  put: 'edit',
  delete: 'delete'
}
// 请求拦截器
axios.interceptors.request.use(function(req){
  const currentUrl = req.url
  console.log(req);
  // 不是登录的请求
  if (currentUrl !== 'login') {
    // 添加请求头
    req.headers.Authorization = sessionStorage.getItem('token')
    // 当前模块中具备的权限
    // 查看用户  get请求  
    // 增加用户  post请求  
    // 修改用户  put请求   
    // 删除用户  delete请求 
    const method = req.method
    // 根据请求, 得到是哪种操作
    const action = actionMapping[method]
    // 判断action是否存在当前路由的权限中
    const rights = router.currentRoute.meta // 当前路由的原信息
    if(rights && rights.indexOf(action) == -1) {
      // 没有权限
      alert('没有权限')
      return Promise.reject(new Error('没有权限'))
    }
  }
  return req
})
axios.interceptors.response.use(function(res){
  if (res.data.meta.status === 401) {//处理token过期
    router.push('/login')
    sessionStorage.clear()
    window.location.reload()
  }
  return res
})
Vue.prototype.$http = axios


  delete: 'delete'
}
// 请求拦截器
axios.interceptors.request.use(function(req){
  const currentUrl = req.url
  console.log(req);
  // 不是登录的请求
  if (currentUrl !== 'login') {
    // 添加请求头
    req.headers.Authorization = sessionStorage.getItem('token')
    // 当前模块中具备的权限
    // 查看用户  get请求  
    // 增加用户  post请求  
    // 修改用户  put请求   
    // 删除用户  delete请求 
    const method = req.method
    // 根据请求, 得到是哪种操作
    const action = actionMapping[method]
    // 判断action是否存在当前路由的权限中
    const rights = router.currentRoute.meta // 当前路由的原信息
    if(rights && rights.indexOf(action) == -1) {
      // 没有权限
      alert('没有权限')
      return Promise.reject(new Error('没有权限'))
    }
  }
  return req
})
axios.interceptors.response.use(function(res){
  if (res.data.meta.status === 401) {
    router.push('/login')
    sessionStorage.clear()
    window.location.reload()
  }
  return res
})
Vue.prototype.$http = axios