宏觀了解權(quán)限

所謂權(quán)限,呈現(xiàn)給不同用戶不同的視覺效果。舉例: a,b,c三個(gè)用戶登錄進(jìn)去,所呈現(xiàn)的菜單導(dǎo)航以及按鈕不同。既然是在點(diǎn)擊登錄時(shí)觸發(fā)。呢么就很簡單,讓后端去在登錄接口里添加兩個(gè)數(shù)組，導(dǎo)航數(shù)組,按鈕數(shù)組。前段進(jìn)行數(shù)據(jù)處理按鈕呢通過js indexOf處理, 導(dǎo)航呢就要通過遞歸遍歷再結(jié)合router的addRouter（）來處理。

再啰嗦一下,權(quán)限這種東西呢,后端可以做方法如下：前段路由表結(jié)構(gòu)發(fā)給后端,后端直接返回。你的側(cè)導(dǎo)航直接拿數(shù)組進(jìn)行遍歷。一個(gè)字快,但是后端有可能不做。原因有2:第一懶更你bb。第二分配權(quán)限還有個(gè)后臺(tái)格式不支持多層數(shù)組。(項(xiàng)目已成型不想改動(dòng))畢竟是單點(diǎn)登錄嗎不想改。

前段主導(dǎo)權(quán)限---菜單權(quán)限

1.路由配置表:

import Vue from "vue";
import Router from "vue-router";
import Login from "@/pages/login/login.vue"


Vue.use(Router);

//* 初始路由 */
export default new Router({
  routes: [
    {
      path: '/',
      redirect: "/login",
    },
    {
      path: "/login",
      component: Login
    }
  ]
});
/**
 * 動(dòng)態(tài)路由
 */

//實(shí)例化vue的時(shí)候只掛載constantRouter
export default new Router({
  routes: constantRouterMap
});

//異步掛載的路由
//動(dòng)態(tài)需要根據(jù)權(quán)限加載的路由表
export const asyncRouterMap = [
  {
    path: '/role',
    component: demo,
    name: '權(quán)限測試',
    meta: { role: ['admin','super_editor'] }, //頁面需要的權(quán)限
  },{
    path : '*',
    redirect : '/404'
  }
];


在vuex中新建一個(gè)permission文件

import Vue from 'vue'
import App from './App'
import router from './router'
import { asyncRouterMap, constantRouterMap } from './router';
import Vuex from "Vuex"
import VueDND from 'awe-dnd'
import BaiduMap from 'vue-baidu-map'
Vue.use(Vuex)
function hasPermission(roles, route) {
  if (route.meta && route.meta.role) {
    console.log(roles);
    return roles.some(role => route.meta.role.indexOf(role) >= 0)
  } else {
    return true
  }
}
const store = new Vuex.Store({
  state: {
    count: 0,
    token:"asdsd",
    roles:"",
    routers:[],
    addRouters:[]
  },
  getters:{
    token(){
      return "asdsd"
    },
    roles(state ){
      return state.roles
    },
    addRouters(state){
      return state.addRouters
    },
    routers(state){
      return state.routers
    }
  },
  actions:{
    GetInfo({state}){
      return {
        data:{
          role:state.roles=["admin"]
        }
      }
    },
    GenerateRoutes({ commit }, data){
      return new Promise(resolve => {
        const { roles } = data;
        console.log(asyncRouterMap,roles);
        const accessedRouters = asyncRouterMap.filter(v => {
          if (roles.indexOf('admin') >= 0) return true;
          if (hasPermission(roles, v)) {
            if (v.children && v.children.length > 0) {
              v.children = v.children.filter(child => {
                if (hasPermission(roles, child)) {
                  return child
                }
                return false;
              });
              return v
            } else {
              return v
            }
          }
          return false;
        });
        console.log(accessedRouters);
        commit('SET_ROUTERS', accessedRouters);
        resolve();
      })
    }
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      console.log(routers);
      state.addRouters = routers;
      state.routers = constantRouterMap.concat(routers);
    }
  }
});
router.beforeEach((to, from, next) => {
  if (store.getters.token) { // 判斷是否有token
    if (to.path === '/login') {
      next({ path: '/' });
    } else {
      if (store.getters.roles.length === 0) { // 判斷當(dāng)前用戶是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => { // 拉取info
          const roles = res.data.role;
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
            console.log(store.getters.addRouters);
            router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪問路由表
            next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(err => {
          console.log(err);
        });
      } else {
        next() //當(dāng)有用戶權(quán)限的時(shí)候，說明所有可訪問路由已生成 如訪問沒權(quán)限的全面會(huì)自動(dòng)進(jìn)入404頁面
      }
    }
  } else {
    next('/login'); // 否則全部重定向到登錄頁
  }
});

//溫馨提示，遞歸處理router遞歸元素一定按照自身的路由元信息,進(jìn)行遍歷。
文檔轉(zhuǎn)載于:[菜單簡易權(quán)限配置](https://blog.csdn.net/qq_41114603/article/details/88062457)

//按鈕權(quán)限
假設(shè)登錄返回了一個(gè)按鈕權(quán)限list

let permissionBtnList = ['home:add','home:delete','home:edit'] //值由前段來寫規(guī)范,模塊名加上特殊符號(hào)拼接按鈕名稱
//進(jìn)行sessionStorage進(jìn)行緩存不必vuex了.單點(diǎn)登錄一版都是JWT驗(yàn)證登錄
sessionStorage.setItem('permissionBtnList ',JSON.stringfy(permissionBtnList ))
// 在Utils文件中書寫
export getPermission function(str=null) {
let permissionBtnList  = JSON.parse(sessionStorage.getItem('permissionBtnList '))
let flag = false
if (permissionBtnList.indexOf(str)  !== -1) {
flag = true
}
return flag
}
// 在組件中使用
import {getPermission} from '@/util/index.js'

<div v-if="getPermission('home:add')"></div>

其實(shí)權(quán)限很簡單,主要是思路，相逢即是緣點(diǎn)個(gè)贊