vue后台系统权限控制的两种思路

本文链接： https://blog.csdn.net/qq_14993375/article/details/85421047

思路1、
在这里插入图片描述

①登录的时候获取用户信息
②判断page里是否有对象，没有的话就把已有路由routerMap 放在空数组routerList里，如果有对象，则遍历判断page是否为true，如果true则为放到空数组routerList里，false的话就return出来
③把routerList跟默认的routes拼接在一起（routerList.concat(routes) 注意routes放后面，因为404页面path: ‘*’）
然后返回出去
④用router.addRoutes添加动态路由的方法，把返回出去的路由添加到路由里（可以复制一份再添加进去）

├──router
│   ├── index.js
│   └── router.js
├──store
│   ├── module
│   │     └── router.js

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './router'
import store from '@/store'
import { setTitle, setToken, getToken } from '@/lib/util'
import clonedeep from 'clonedeep'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes
})

const HAS_LOGINED = false

router.beforeEach((to, from, next) => {
  to.meta && setTitle(to.meta.title)
  const token = getToken()
  if (token) {
    if (!store.state.router.hasGetRules) {
      store.dispatch('authorization').then(rules => { 
        store.dispatch('concatRoutes', rules).then(routers => {
          router.addRoutes(clonedeep(routers))   //返回出来的数据添加进动态路由里
          next({ ...to, replace: true })
        }).catch(() => {
          next({ name: 'login' })
        })
      }).catch(() => {
        setToken('')
        next({ name: 'login' })
      })
    } else {
      next()
    }
  } else {
    if (to.name === 'login') next()
    else next({ name: 'login' })
  }
})

router.afterEach((to, from) => {
  // logining = false
})

export default router

// router/router.js
export const routerMap = [
  {
    path: '/home',
    name: 'home',
    component: Layout,
    meta: {
      title: '首页'
    },
    children: [
      {
        path: 'home_index',
        name: 'home_index',
        meta: {
          title: '首页'
        },
        component: Home
      }
    ]
  },
  {
    path: '/form',
    name: 'form',
    meta: {
      title: 'form'
    },
    component: () => import('@/views/form.vue')
  },
  ...
]
export const routes = [
  {
    path: '/login',
    name: 'login',
    meta: {
      title: '登录'
    },
    component: () => import('@/views/login.vue')
  },
  {
    path: '*',
    component: () => import('@/views/error_404.vue')
  }
]

//store/module/router.js
import { routes, routerMap } from '@/router/router'
const state = {
  routers: routes,
  hasGetRules: false
}
const mutations = {
  CONCAT_ROUTES (state, routerList) {
    state.routers = routerList.concat(routes)
    state.hasGetRules = true
  }
}
const getAccesRouterList = (routes, rules) => {
  return routes.filter(item => {
    if (rules[item.name]) {
      if (item.children) item.children = getAccesRouterList(item.children, rules)
      return true
    } else return false
  })
}
const actions = {
  concatRoutes ({ commit }, rules) {
    return new Promise((resolve, reject) => {
      try {
        let routerList = []
        if (Object.entries(rules).every(item => item[1])) {
          routerList = routerMap
        } else {
          routerList = getAccesRouterList(routerMap, rules)
        }
        commit('CONCAT_ROUTES', routerList)
        resolve(state.routers)
      } catch (err) {
        reject(err)
      }
    })
  }
}
export default {
  state,
  mutations,
  actions
}

思路2、
这种是比较常见到的方法
在这里插入图片描述
①登录的时候获取用户信息
②判断获取的信息中是否有roles，有的话则过滤出含有[‘admin’]的路由，赋给空数组accessedRouters
③把accessedRouters 跟默认的路由拼接在一起
④用router.addRoutes添加动态路由的方法，把返回出去的路由添加到路由里（可以复制一份再添加进去）

├──router
│   ├── index.js
├──store
│   ├── module
│   │     └── permission.js
└── promission.js

方法2参考代码

vue后台系统权限控制的两种思路

猜你喜欢