今天來說說許可權管理,因為網上已經有很多關於這方面的很多內容,博主也是借鑑了網上的一些邏輯來寫的,主要也是說說前端實現許可權管理的乙個思路,也是作為自己日後面對這樣的問題的乙個解決方案。
首先需要了解的就是純前端是無法實現許可權管理的,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許可權管理
博主最近剛剛上手乙個圖書管理系統的小demo,在編寫的過程中遇到了許多的問題,尤其是對於我這樣的新手來說許可權管理是乙個難點,本身對vue就不是很理解,所以查閱了許多的文章後才有一點點思路,所以在這裡記錄下來,也希望其他的小白也能夠少走一些彎路。我大概的思路是這樣的 首先,我們我們有兩種使用者,乙個...
Vue後台許可權管理
許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保使用者只能訪問被分配的資源 而前端許可權總的來說是請求許可權 請求的發起可能有下面兩種形式觸發 總的來說 所有的請求發起都觸發自前端路由或試圖 所以我們可以從這兩個方面入手 對觸發許可權的源頭進行控制 最終要實現目標是 前端許可權控制可以分為 ...
vue 需求 許可權管理
1 全域性註冊元件 vue.directive arrowbtn 使用自定義指令 編輯 獲取角色擁有的頁面許可權 const await store.dispatch user getinfo 篩選有顯示許可權的頁面 const filterroutes asyncroutes.filter ite...