摘要:如果一個(gè)頁(yè)面,有角色越權(quán)訪問(wèn),這時(shí)就得做出限制了。我們可以通過(guò)或來(lái)實(shí)現(xiàn),下面用代碼來(lái)展示一下如何用控制登陸驗(yàn)證。
更多文章 頁(yè)面權(quán)限控制
頁(yè)面權(quán)限控制是什么意思呢?
就是一個(gè)網(wǎng)站有不同的角色,比如管理員和普通用戶,要求不同的角色能訪問(wèn)的頁(yè)面是不一樣的。如果一個(gè)頁(yè)面,有角色越權(quán)訪問(wèn),這時(shí)就得做出限制了。
Vue 動(dòng)態(tài)添加路由及生成菜單這是我寫(xiě)過(guò)的一篇文章,
通過(guò)動(dòng)態(tài)添加路由和菜單來(lái)做控制,不能訪問(wèn)的頁(yè)面不添加到路由表里,這是其中一種辦法。
另一種辦法就是所有的頁(yè)面都在路由表里,只是在訪問(wèn)的時(shí)候要判斷一下角色權(quán)限。如果有權(quán)限就讓訪問(wèn),沒(méi)有權(quán)限就拒絕,跳轉(zhuǎn)到 404 頁(yè)面。
思路:
在每一個(gè)路由的 meta 屬性里,將能訪問(wèn)該路由的角色添加到 roles 里。用戶每次登陸后,將用戶的角色返回。然后在訪問(wèn)頁(yè)面時(shí),把路由的 meta 屬性和用戶的角色進(jìn)行對(duì)比,如果用戶的角色在路由的 roles 里,那就是能訪問(wèn),如果不在就拒絕訪問(wèn)。
代碼示例:
路由信息
</>復(fù)制代碼
routes: [
{
path: "/login",
name: "login",
meta: {
roles: ["admin", "user"]
},
component: () => import("../components/Login.vue")
},
{
path: "home",
name: "home",
meta: {
roles: ["admin"]
},
component: () => import("../views/Home.vue")
},
]
頁(yè)面控制
</>復(fù)制代碼
// 假設(shè)角色有兩種:admin 和 user
// 這里是從后臺(tái)獲取的用戶角色
const role = "user"
// 在進(jìn)入一個(gè)頁(yè)面前會(huì)觸發(fā) router.beforeEach 事件
router.beforeEach((to, from, next) => {
if (to.meta.roles.includes(role)) {
next()
} else {
next({path: "/404"})
}
})
登陸驗(yàn)證
網(wǎng)站一般只要登陸過(guò)一次后,接下來(lái)該網(wǎng)站的其他頁(yè)面都是可以直接訪問(wèn)的,不用再次登陸。
我們可以通過(guò) token 或 cookie 來(lái)實(shí)現(xiàn),下面用代碼來(lái)展示一下如何用 token 控制登陸驗(yàn)證。
</>復(fù)制代碼
router.beforeEach((to, from, next) => {
// 如果有token 說(shuō)明該用戶已登陸
if (localStorage.getItem("token")) {
// 在已登陸的情況下訪問(wèn)登陸頁(yè)會(huì)重定向到首頁(yè)
if (to.path === "/login") {
next({path: "/"})
} else {
next({path: to.path || "/"})
}
} else {
// 沒(méi)有登陸則訪問(wèn)任何頁(yè)面都重定向到登陸頁(yè)
if (to.path === "/login") {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})
上述所有實(shí)現(xiàn),都可以在我的vue輕量級(jí)后臺(tái)管理系統(tǒng)基礎(chǔ)模板項(xiàng)目里找到
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/104864.html
摘要:前言本文主要使用來(lái)實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理,適合和我一樣剛開(kāi)始接觸前后端完全分離項(xiàng)目的同學(xué),但是你必須自己搭建過(guò)前端項(xiàng)目和后端項(xiàng)目,本文主要是介紹他們之間的互通,如果不知道這么搭建前端項(xiàng)目的同學(xué)可以先找別的看一下。 前言 本文主要使用spring boot + shiro + vue來(lái)實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理,適合和我一樣剛開(kāi)始接觸前后端完全分離項(xiàng)目的同學(xué),但是你必...
摘要:項(xiàng)目中按鈕權(quán)限注冊(cè)全局自定義指令來(lái)完成的。如果對(duì)自定義指令不熟的話可以查閱官方文檔。相關(guān)文章鏈接從到搭建后臺(tái)框架打包優(yōu)化從到搭建后臺(tái)框架優(yōu)化篇 前言 首先還是謝謝各位童鞋的大大的贊贊,你們的支持是我前進(jìn)的動(dòng)力!上周寫(xiě)了一篇從0到1搭建element后臺(tái)框架,很多童鞋留言提到權(quán)限問(wèn)題,這一周就給大家補(bǔ)上。GitHub 一、jwt授權(quán)認(rèn)證 現(xiàn)在大多數(shù)項(xiàng)目都是采用jwt授權(quán)認(rèn)證,也就是我們所...
摘要:有一天突然想到一個(gè)問(wèn)題,端的權(quán)限控制真的能控制權(quán)限嗎僅僅靠前端,能不能做到真正的權(quán)限控制如果需要后臺(tái)配合,應(yīng)該如何配合可能這是一個(gè)老生常談的問(wèn)題,但還是想整理下,有誤的地方望大家指出。 有一天突然想到一個(gè)問(wèn)題,web端的權(quán)限控制:1.真的能控制權(quán)限嗎?2.僅僅靠前端,能不能做到真正的權(quán)限控制?3.如果需要后臺(tái)配合,應(yīng)該如何配合?可能這是一個(gè)老生常談的問(wèn)題,但還是想整理下,有誤的地方望大...
摘要:用存儲(chǔ)用戶路由守衛(wèi)路由中設(shè)置的字段就在當(dāng)中每次跳轉(zhuǎn)的路徑登錄狀態(tài)下訪問(wèn)頁(yè)面會(huì)跳到如果沒(méi)有訪問(wèn)任何頁(yè)面。一個(gè)簡(jiǎn)單的保存登錄狀態(tài)的小。 Vue項(xiàng)目中實(shí)現(xiàn)用戶登錄及token驗(yàn)證 先說(shuō)一下我的實(shí)現(xiàn)步驟: 使用easy-mock新建登錄接口,模擬用戶數(shù)據(jù) 使用axios請(qǐng)求登錄接口,匹配賬號(hào)和密碼 賬號(hào)密碼驗(yàn)證后, 拿到token,將token存儲(chǔ)到sessionStorage中,并跳轉(zhuǎn)到首...
摘要:目前是沒(méi)有給我處理好權(quán)限這塊的邏輯。我們的項(xiàng)目正常是路由是在本地配置好的一個(gè)路由文件,所以,要想實(shí)現(xiàn)動(dòng)態(tài)的路由,我們就必須讓實(shí)現(xiàn)動(dòng)態(tài)生成。具體頁(yè)面上的按鈕權(quán)限的分配在前端頁(yè)面是怎么控制的,完全可以去里借鑒。 iview admin目前是沒(méi)有給我處理好權(quán)限這塊的邏輯。所以,權(quán)限這塊還是得我們自己去擼。(臉上笑嘻嘻、心里mmp!) 思路做權(quán)限,說(shuō)到底就是為了讓不同權(quán)限的用戶, 可以訪問(wèn)不...
閱讀 3772·2023-04-25 20:00
閱讀 3120·2021-09-22 15:09
閱讀 515·2021-08-25 09:40
閱讀 3425·2021-07-26 23:38
閱讀 2213·2019-08-30 15:53
閱讀 1101·2019-08-30 13:46
閱讀 2799·2019-08-29 16:44
閱讀 2052·2019-08-29 15:32