關於vue許可權問題

2021-10-21 17:36:30 字數 2407 閱讀 3443

**

我們在開發時,經常或遇到許可權處理問題,下面介紹兩種許可權控制的方法:

路由元資訊(meta);

動態載入選單和路由(addroutes)

如果乙個**有不同的角色,比如 管理員 和 普通使用者 ,要求不同的角色能訪問的頁面是不一樣的

這個時候我們就可以 把所有的頁面都放在路由表裡 ,只要 在訪問的時候判斷一下角色許可權 。如果有許可權就讓訪問,沒有許可權的話就拒絕訪問,跳轉到404頁面

vue-router 在構建路由時提供了元資訊 meta 配置介面,我們可以在元資訊中新增路由對應的許可權,然後在路由守衛中檢查相關許可權,控制其路由跳轉。

可以在每乙個路由的 meta 屬性裡,將能訪問該路由的角色新增到 roles 裡。使用者每次登陸後,將使用者的角色返回。然後在訪問頁面時,把路由的 meta 屬性和使用者的角色進行對比,如果使用者的角色在路由的 roles 裡,那就是能訪問,如果不在就拒絕訪問。

**示例1:

路由資訊:

routes: [

,component: () => import(』…/components/login.vue』)},,

component: () => import(』…/views/home.vue』)},]

頁面控制:

//假設有兩種角色:admin 和 user

//從後台獲取的使用者角色

const role = 『user』

//當進入乙個頁面是會觸發導航守衛 router.beforeeach 事件

router.beforeeach((to,from,next)=>esle) //跳到404頁面}})

**示例2

當然也可以用下面的一種方法:

// router.js

// 路由表元資訊[,

},}]// 在守衛中訪問元資訊

function gaurd (to, from, next)

可以在多個路由下面新增這個許可權標識,達到控制的目的

只要一切換頁面,就需要看有沒有這個許可權,所以可以在最大的路由下 main.js 中配置

**儲存資訊

一般的,使用者登入後會在本地儲存使用者的認證資訊,可以用 token 、 cookie 等,這裡我們用 token 。

將使用者的 token 儲存到 localstorage 裡,而使用者資訊則存在記憶體 store 中。這樣可以在 vuex 中儲存乙個標記使用者登入狀態的屬性 auth ,方便許可權控制。

**示例

// store.js

},mutations: ,

cleartoken (state) ,

setuserinfo (state, userinfo)

},actions:

return response

})},

async login (ctx, account) })}

}}寫好路由表和vuex之後,給所有路由設定乙個全域性守衛,在進入路由之前進行許可權檢查,並導航到對應的路由。

// store.js

},mutations: ,

cleartoken (state) ,

setuserinfo (state, userinfo)

},actions:

return response

})},

async login (ctx, account) })}

}}上述的方法是基於 jwt 認證方式,本地不持久化使用者資訊,只儲存 token ,當使用者重新整理或者重新開啟網頁時,進入需要登入的頁面都會嘗試去請求使用者資訊,該操作在整個訪問過程中只進行一次,直到重新整理或者重新開啟,對於應用後期的開發維護和擴充套件支援都很好。

動態載入選單和路由(addroutes)

有時候為了安全,我們需要根據使用者許可權或者是使用者屬性去動態的新增選單和路由表,可以實現對使用者的功能進行定製。 vue-router 提供了 addroutes() 方法,可以動態註冊路由, 需要注意的是,動態新增路由是在路由表中 push 路由,由於路由是按順序匹配的,因此需要將諸如404頁面這樣的路由放在動態新增的最後。

**示例

// store.js

// 將需要動態註冊的路由提取到vuex中

const dynamicroutes = [

,component: () => import(』./views/manage』)},,

component: () => import(』./views/usercenter』)}]

在 vuex 中新增 userroutes 陣列用於儲存使用者的定製選單。在setuserinfo中根據後端返回的選單生成使用者的路由表。

// store.js

setuserinfo (state, userinfo) )

router.addroutes(state.userroutes) // 註冊路由

主頁 登入 }

關於許可權問題

關於6.0許可權 使用permissiondispater 需要注意的問題 使用的activity 必須繼承 不支援fragment 遇到這麼坑的問題時 我只想嚎啕大哭 但是部門妹子太多 哭起來沒人心疼 還是自己整吧 一般使用手動定義的 新增許可權 private void addpermissio...

關於lnmp許可權問題

方法1 user.ini檔案無法直接修改,如要修或刪除需要先執行 chattr i 目錄 user.ini 可以使用winscp檔案管理 vim編輯器或nano編輯器進行修改。刪除的話rm f 目錄 user.ini 就可以。修改完成後再執行 chattr i 目錄 user.ini user.in...

關於VUE做後台的許可權控制

因為是php和前端都是我自己寫,以前一直使用後端控制許可權進行重定向。因為這次使用的vue進行乙個商戶管理端的開發,臨時要求加入許可權,不得已下只能使用前端進行許可權控制 其中使用到vuex sessionstorage儲存登入資訊 vuex的狀態儲存是響應式的,當vue元件從store中讀取狀態的...