vue 許可權管理

今天來說說許可權管理，因為網上已經有很多關於這方面的很多內容，博主也是借鑑了網上的一些邏輯來寫的，主要也是說說前端實現許可權管理的乙個思路，也是作為自己日後面對這樣的問題的乙個解決方案。

首先需要了解的就是純前端是無法實現許可權管理的，vue的許可權管理主要是基於路由實現的，當然這樣的許可權管理完全可以被繞過去的，而之所以在前端這麼做，更多是為了使用者體驗，節省不必要的載入開銷等等。

用vue來實現許可權管理，主要就是基於這個新的vue的api，addroutes的方法來實現的，當然許可權管理也分為幾個方面，博主今天主要就是說的頁面級的許可權，思路就是利用剛剛說的api來動態載入路由，我們將路由分為兩個部分，乙個是公共部分，即所有人都能看到的路由，另外一部分則是動態載入部分，這裡也簡單的將**貼出來，大家參考一下就可以，網上的**也是有很多

import vue from 'vue'
import router from 'vue-router'
vue.use(router)
export const constroutermap = [
, component: () => import('@/views/login.vue')
},, component: () => import('@/views/homepage.vue')},,
component: () => import('@/views/about.vue')},,
component: () => import('@/views/aboutauthor.vue')},,
component: () => import('@/views/weatherfore.vue')},,
component: () => import('@/views/dynamictable.vue')},,
component: () => import('@/views/tablegrid.vue')}]
} 
]export const asyncroutermap = [},}
]},
, ]export default new router()

看到這個**應該知道，我們首先是先載入公共路由部分，然後再根據vue-router提供的路由導航鉤子，當路由進行跳轉的時候，向伺服器請求使用者的角色許可權

import router from './router'
import store from '@/store/index'
import from 'element-ui'
const whitelist = ['/login']
router.beforeeach((to, from, next) => else )
.then(() => )
}).catch(err => )
})} else 
}} else else 
}})

這裡後台博主用了thinkjs的框架，博主現在還在整理，後續整理好，也會上傳到github上面。在這個導航鉤子上，我們利用了vuex來儲存角色資訊，每次登陸會進行判斷，如果沒有角色資訊，就會去觸發action來請求伺服器，伺服器返回角色欄位後，我們將他存在store裡面。另外根據上面的路由，我們將頁面許可權需要的角色放在路由的meta欄位中，所以當我們拿到角色資訊後，會和動態路由中的meta進行一一對比，需要注意的是，當路由有巢狀的children屬性時，我們還需要將children裡面的路由拿出來一一進行遞迴對比，這樣如果伺服器的角色資訊，符合路由需要的許可權，我們就將這個路由記錄下來，最後組成需要新增的路由，利用addroutes來形成最終的路由。

generateroute (, data)  else 
// console.log(accessrouters)
commit('set_routers', accessrouters)
commit('set_roles', roles)
resolve()
})},

function haspermission (roles, route)  else 
}function filterasyncrouter (asyncrouter, roles) 
return true
}return false
})// console.log(accessrouters)
return accessrouters
}

結合前面的導航鉤子就形成了最終的路由，當使用者試圖訪問不存在的路由的時候，則會返回404頁面，另外也簡單的說下按鈕及頁面中檢視顯示的許可權，其實也是利用了vue的自定義指令，我們給自定義指令傳入需要的角色許可權陣列，然後和儲存在store中的許可權作對比，如果沒有許可權，則移除當前的dom元素

import store from '@/store/index'
const permission = = binding
const roles = store.getters && store.getters.roles
if (value && value instanceof array && value.length > 0) )
if (!haspermission) 
} else 
}}export default permission

這些**都是博主自己寫的專案中的片段，完整的**，大家有興趣可以去github上面檢視。之前寫的許可權沒有問題，但是重新整理的時候，突然發現許可權需要重新整理的時候才會生效，技術有限，所以要是有同學發現**有什麼問題，可以隨時告訴博主，當然博主也是會繼續踩坑下去，解決這個問題。

vue 許可權管理

Vue許可權管理

Vue後台許可權管理

vue 需求許可權管理

vue 許可權管理

Vue許可權管理

Vue後台許可權管理

vue 需求 許可權管理

相關推薦

vue 需求許可權管理