第86集筆記 （課堂筆記及相關權限驗證的方法）

路由守衛(wèi)：

beforeRouterEnter?驗證前調用

beforeRouteUpdate 被復用時調用

beforeRouteLeave 離開路由時調用

從路由守衛(wèi)中可以拓展出利用路由守衛(wèi)實現(xiàn)登錄權限驗證等。

由此可以拓展出其他的權限驗證方法，包括菜單權限，按鈕權限

如：

1.在路由配置中添加meta字段，用于存儲路由的訪問權限等信息。

const routes = [

{path: '/user',

component: User,

meta: {

requiredAuth: true

} } ]

2.在全局路由守衛(wèi)中檢查用戶的訪問權限。

全局路由守衛(wèi)里，每次路由跳轉都要做判斷

優(yōu)點：

• 權限驗證邏輯集中在守衛(wèi)中,便于維護
• 可以按需為不同路由設置不同的訪問權限

這種方式的缺點：

菜單需要與路由做一一對應，前端添加了新功能，需要通過菜單管理功能添加新的菜單，如果菜單配置的不對會導致應用不能正常使用

3.在菜單組件中根據(jù)用戶的訪問權限來生成菜單。(自定義方法和v-if指令)

4.權限校驗mixin

例子:const permissionMixin = {

?mounted() {

??if (!hasPermission(this.permission)) {

???this.$el.parentNode.removeChild(this.$el)

??}?

?}

}

封裝一個mixin,在mounted鉤子中進行權限校驗,如果沒有權限則移除DOM元素:

5.后端控制

在后端接口中已經(jīng)進行過權限控制,前端組件直接根據(jù)后端返回的信息進行展示。

其實最簡單的驗證就是利用v-if指令

<button v-if="hasPermission('delete')">刪除</button>

這樣即可。

設置權限的目的：確保我們所開發(fā)的程序的安全性和穩(wěn)定性