基於Vue2.0實現後臺系統權限控制

時間 2019-11-06

標籤基於 vue2.0 vue 實現後臺系統權限控制简体版

原文原文鏈接

基於Vue.js 2.x系列 + Element UI 的後臺系統權限控制

前言：關於vue權限路由的那些事兒……

項目背景:現有一個後臺管理系統，共存在兩種類型的人員html

①超級管理員（稱做admin），②普通用戶（稱做editor）前端

每種類型的人看到的操做欄並不同，能夠進行的操做也不盡相同，因而就須要程序處理一下各個權限問題。vue

過程說難不難，說簡單不算簡單

【迷茫的前期】

上百度、Google，狂搜了好多關於權限的問題，也許是仁者見仁智者見智吧，五花八門的介紹讓本身更加迷茫不堪，真心不知道從哪裏下手：git

1）讓後端返回關於權限的json數據吧，但卻不太懂這樣的數據應該怎樣處理；github

2）在前端路由那裏處理，但是不明白應該怎樣使用何種屬性來實現這個功能；vue-router

【最後】

最後看到一篇文章手摸手，帶你用vue擼後臺系列二(登陸權限篇) ，可是發現代碼很是多權限功能是整合在框架裏面的，傷心，我就想實現一個小小的權限功能，沒辦法仍是得仔細研究做者的代碼。vuex

具體實現思路

1 建立vue實例的時候將vue-router掛載，但這個時候vue-router掛載一些登陸或者不用權限的公用的頁面。element-ui

2 當用戶登陸後，獲取用role，將role和路由表每一個頁面的須要的權限做比較，生成最終用戶可訪問的路由表。json

3 調用router.addRoutes(store.getters.addRouters)添加用戶可訪問的路由。後端

4 使用vuex管理路由表，根據vuex中可訪問的路由渲染側邊欄組件。

是否是有點懵不要緊下面我儘可能用通俗點的話來說每一步

1在路由router.js裏面聲明權限爲admin的路由(異步掛載的路由asyncRouterMap)

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/',
    redirect: '/login',
    hidden: true
  },
  {
    path: '/login',
    name: '登陸頁面',
    hidden: true,
    component: resolve => require(['../views/login/Login.vue'], resolve)
  },
  {
    path: '/Readme',
    // name: 'Readmehome',
    index: 'Readme',
    meta: {
      title: 'Readme',
      icon: 'el-icon-menu'
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'Readme',
        path: '/',
        meta: { title: 'Readme', icon: 'el-icon-menu' },
        component: resolve => require(['../components/page/Readme.vue'], resolve)
      }
    ]
  }
]

export default new Router({
  routes: constantRouterMap
})
// 異步掛載的路由
// 動態須要根據權限加載的路由表
export const asyncRouterMap = [
  {
    path: '/permission',
    // name: 'permissionhome',
    meta: {
      title: 'permission',
      icon: 'el-icon-setting',
      roles: ['admin']
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'permission',
        path: '/permission',
        meta: {
          title: 'permission', icon: 'el-icon-menu', roles: ['admin']
        },
        component: resolve => require(['../components/page/permission.vue'], resolve)
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

複製代碼

這裏咱們根據 vue-router官方推薦的方法經過meta標籤來標示改頁面能訪問的權限有哪些。如meta: { role: ['admin','super_editor'] }表示該頁面只有admin和超級編輯纔能有資格進入。

注意事項：這裏有一個須要很是注意的地方就是 404 頁面必定要最後加載，若是放在constantRouterMap一同聲明瞭404，後面的因此頁面都會被攔截到404，詳細的問題見addRoutes when you've got a wildcard route for 404s does not work

2當用戶登陸後，獲取用role，將role和路由表每一個頁面的須要的權限做比較，調用router.addRoutes(store.getters.addRouters)添加用戶可訪問的路由，生成最終用戶可訪問的路由表。路由表存在vuex裏面

permission.js

// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 驗權

const whiteList = ['/login', '/authredirect'] // 不重定向白名單

router.beforeEach((to, from, next) => {
  if (getToken()) { // 判斷是否有token
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {
        console.log('roles====0')
        store.dispatch('GetInfo').then(res => { // 拉取用戶信息
          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
          console.log('roles?', roles)
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根據roles權限生成可訪問的路由表
            console.log('addrouters', store.getters.addRouters)
            router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
            next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('驗證失敗,請從新登陸')
            next({ path: '/login' })
          })
        })
      } else {
        console.log('====1')
        next() // 當有用戶權限的時候，說明全部可訪問路由已生成 如訪問沒權限的全面會自動進入404頁面
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})


複製代碼