Vue 頁面許可權控制和登陸驗證

2022-03-07 09:38:56 字數 2215 閱讀 5318

頁面許可權控制是什麼意思呢?

就是乙個**有不同的角色,比如管理員和普通使用者,要求不同的角色能訪問的頁面是不一樣的。如果乙個頁面,有角色越權訪問,這時就得做出限制了。

通過動態新增路由和選單來做控制,不能訪問的頁面不新增到路由表裡,這是其中一種辦法。

另一種辦法就是所有的頁面都在路由表裡,只是在訪問的時候要判斷一下角色許可權。如果有許可權就讓訪問,沒有許可權就拒絕,跳轉到 404 頁面。

思路

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

**示例

路由資訊

routes: [

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

component: () => import('../views/home.vue')

},]

頁面控制

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

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

const role = 'user'

// 在進入乙個頁面前會觸發 router.beforeeach 事件

router.beforeeach((to, from, next) => else )

}})

**一般只要登陸過一次後,接下來該**的其他頁面都是可以直接訪問的,不用再次登陸。

我們可以通過tokencookie來實現,下面用**來展示一下如何用token控制登陸驗證。

router.beforeeach((to, from, next) => )

} else )

}} else else `)}}

})

頁面許可權控制是什麼意思呢?

就是乙個**有不同的角色,比如管理員和普通使用者,要求不同的角色能訪問的頁面是不一樣的。如果乙個頁面,有角色越權訪問,這時就得做出限制了。

通過動態新增路由和選單來做控制,不能訪問的頁面不新增到路由表裡,這是其中一種辦法。

另一種辦法就是所有的頁面都在路由表裡,只是在訪問的時候要判斷一下角色許可權。如果有許可權就讓訪問,沒有許可權就拒絕,跳轉到 404 頁面。

思路

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

**示例

路由資訊

routes: [

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

component: () => import('../views/home.vue')

},]

頁面控制

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

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

const role = 'user'

// 在進入乙個頁面前會觸發 router.beforeeach 事件

router.beforeeach((to, from, next) => else )

}})

**一般只要登陸過一次後,接下來該**的其他頁面都是可以直接訪問的,不用再次登陸。

我們可以通過tokencookie來實現,下面用**來展示一下如何用token控制登陸驗證。

router.beforeeach((to, from, next) => )

} else )

}} else else `)}}

})

Vue 頁面許可權控制和登陸驗證

頁面許可權控制是什麼意思呢?就是乙個 有不同的角色,比如管理員和普通使用者,要求不同的角色能訪問的頁面是不一樣的。如果乙個頁面,有角色越權訪問,這時就得做出限制了。vue 動態新增路由及生成選單這是我寫過的一篇文章,通過動態新增路由和選單來做控制,不能訪問的頁面不新增到路由表裡,這是其中一種辦法。另...

mysql登陸,建立使用者,許可權控制

如何登陸mysql 注意 2 一般的資料庫軟體中有很多外掛程式,選擇性的安裝,一般只需要client,server,database 3 在安裝資料庫的過程中會建立root使用者及可以備選的使用者,及密碼。2.登陸mysql 1 第一種方式 一般本地連線 通過client登陸,預設使用的是root使...

vue 登入驗證與許可權控制

描述具體問題 業務系統通常需要登入才能訪問受限資源,在使用者未登入情況下訪問受限資源需要重定向到登入頁面 多個業務系統之間要實現單點登入,即在乙個系統或應用已登入的情況下,再訪問另乙個系統時不需要重複登入 在登入過期或失效時,需要重定向到登入頁面 使用者登入後,需對改使用者擁有的許可權進行功能和ui...