2步教你在Vue中設(shè)置登錄驗(yàn)證攔截
今天在做vue和springboot交互的一個(gè)項(xiàng)目的時(shí)候，想要基于前端實(shí)現(xiàn)一些只有登錄驗(yàn)證之后才能訪問某些頁面的操作，所以在這里總結(jié)一下實(shí)現(xiàn)該功能的一個(gè)解決方案。
首先說一下我是如何判斷是否已經(jīng)登錄的。
一、解決思路由于在我的springboot后臺(tái)采用的shiro+Jwt安全框架，所以會(huì)在登錄之后反饋給前端一個(gè)token，并且前端會(huì)將該token進(jìn)行存儲(chǔ)，所以我是去查找瀏覽器中是否存在token，如果瀏覽器中存在token，則說明登錄成功，可以訪問相關(guān)頁面；如果沒有token則說明沒有登錄，j就跳轉(zhuǎn)到登錄頁面。為了簡(jiǎn)化操作，我將這個(gè)驗(yàn)證的過程進(jìn)行了封裝。
注意：
使用這種方法進(jìn)行驗(yàn)證的前提是你的前后端是通過shiro和token進(jìn)行驗(yàn)證的，并且前端會(huì)存儲(chǔ)服務(wù)器返回的token。
二、讓瀏覽器存儲(chǔ)服務(wù)器返回的token首先來看一下服務(wù)器端返回的token是如何被我在前端頁面中存儲(chǔ)的。
首先我在store文件下的index.js文件中封裝了一個(gè)SET_TOKEN方法，用來將token存儲(chǔ)到瀏覽器，這樣我們每次就都可以通過localStorage.getItem(“token”),來從本地拿到我們的token，同時(shí)封裝了一個(gè)REMOVE_INFO方法，在當(dāng)我們退出登錄的時(shí)候，清空瀏覽器中的token信息。
store文件下的index.js中代碼如下：
importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{//token:"",//用戶的信息可以直接從瀏覽器中取出來token:localStorage.getItem("token"),//反序列化操作userInfo:JSON.parse(sessionStorage.getItem("userInfo"))},mutations:{/**類似set操作*///給token賦值SET_TOKEN:(state,token)=>{state.token=token;//將信息存儲(chǔ)到瀏覽器中，以至于瀏覽器關(guān)閉時(shí)信息還在localStorage.setItem("token",token);},//給userinfo賦值SET_USERINFO:(state,userInfo)=>{state.userInfo=userInfo;//session會(huì)在每次瀏覽器關(guān)閉時(shí)清空，在重新登錄后再生成//由于sessionStorage不能存儲(chǔ)對(duì)象，所以要將其存儲(chǔ)成字符串的形式sessionStorage.setItem("userInfo",JSON.stringify(userInfo));},//移除用戶信息REMOVE_INFO:(state)=>{//移除用戶信息時(shí)將用戶所有的信息都置為空state.token="";state.userInfo={};localStorage.setItem("token","");sessionStorage.setItem("userInfo",JSON.stringify(""));}},getters:{/**類似get請(qǐng)求*///獲取用戶信息getUser:state=>{returnstate.userInfo;}},actions:{},modules:{}})三、在請(qǐng)求中設(shè)置訪問權(quán)限由于我們并不是所有的頁面都只要在登錄的時(shí)候才能訪問，所以我們要對(duì)需要進(jìn)行登錄才能訪問的頁面設(shè)置訪問權(quán)限，在vue中我們一般將訪問路由設(shè)置在router下的index.js文件中，對(duì)于需要添登錄權(quán)限的請(qǐng)求路由，我們可以給其增加meta屬性，在其中設(shè)置一個(gè)Boolean類型的屬性requireAuth，我們會(huì)以該屬性是否為true來判斷是否需要驗(yàn)證登錄。
比如我們的BlogEdit頁面只有在登錄的時(shí)候才能訪問，Login頁面不需要登權(quán)限，那么我們就可以這樣設(shè)置：
（代碼有刪減，但是保留了核心部分，只是刪除了部分路由。）
/***路由注冊(cè)中心*/importVuefrom'vue'importVueRouterfrom'vue-router'//注冊(cè)頁面importLoginfrom'../views/Login.vue'importBlogEditfrom'../views/BlogEdit.vue'Vue.use(VueRouter)constroutes=[{path:'/login',name:'Login',component:Login},{path:'/blog/add',name:'BlogAdd',component:BlogEdit,//添加權(quán)限訪問，表示只有登錄之后才能進(jìn)行該操作meta:{requireAuth:true}},]constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes})exportdefaultrouter這樣在每次請(qǐng)求BlogEdit頁面的時(shí)候都會(huì)進(jìn)行判斷。
四、封裝登錄驗(yàn)證現(xiàn)在我們需要寫一個(gè)方法來對(duì)我們剛才設(shè)置的屬性進(jìn)行驗(yàn)證。所以在src目錄下新建一個(gè)permission.js文件，在其中進(jìn)行封裝。
思路是這樣的：
首先我們攔截該請(qǐng)求，獲取到該請(qǐng)求中的requireAuth參數(shù)，如果參數(shù)是true，那么就去獲取瀏覽器中的token，驗(yàn)證當(dāng)前是否是登錄狀態(tài)。如果存在token，就放行請(qǐng)求；如果沒有獲取到token，就跳轉(zhuǎn)到登錄頁面。
注意：
如果你是基于其他驗(yàn)證登錄的，可以將//獲取到本地的tokenconsttoken=ocalStorage.getItem(“token”)換成你的驗(yàn)證方式，但是思路都是一樣的。
代碼如下：
/***請(qǐng)求登錄驗(yàn)證，如果沒有登錄，不能訪問頁面，返回到登錄頁面*/importrouterfrom"./router";//路由判斷登錄，根據(jù)路由配置文件的參數(shù)router.beforeEach((to,from,next)=>{//判斷該路由是否需要登錄權(quán)限//record.meta.requireAuth是獲取到該請(qǐng)求中攜帶的該參數(shù)if(to.matched.some(record=>record.meta.requireAuth)){//獲取到本地的tokenconsttoken=localStorage.getItem("token")console.log("顯示token----------："+token)//判斷當(dāng)前的token是否存在，也就是登錄時(shí)的tokenif(token){//如果指向的是登錄頁面，不做任何操作if(to.path==="/login"){}else{//如果不是登錄頁面，且token存在，就放行next()}}else{//如果token不存在//前往登錄next({path:'/login'})}}else{//如果不需要登錄認(rèn)證，就直接訪問next()}})最后別忘了將該頁面引入到mian.js中。
//導(dǎo)入permission.js，用戶進(jìn)行前端的權(quán)限控制import"./permission"總結(jié)主要的操作就是第三步和第四步，只要你在請(qǐng)求路由中設(shè)置了登錄驗(yàn)證的參數(shù)，同時(shí)第四步寫入了登錄攔截驗(yàn)證，并且引入到的main.js文件中，就可以了！
至此通過前端驗(yàn)證登錄攔截完成。
Vue丨路由跳轉(zhuǎn)以及路由攔截
安裝并使用vue-router的過程中，會(huì)涉及到token驗(yàn)證，確保用戶已經(jīng)登錄且token有效。main.js文件中引入并使用router，實(shí)現(xiàn)在登錄成功后跳轉(zhuǎn)到首頁。同時(shí)，枚舉文件（enum）和本地緩存函數(shù)（storage）在permission文件中被提及，用于存儲(chǔ)和管理用戶狀態(tài)。已經(jīng)實(shí)現(xiàn)了基礎(chǔ)的路由跳轉(zhuǎn)和路由攔截，接下來會(huì)介紹vuex的...
前后端分離使用 Token 登錄解決方案
在前后端分離的架構(gòu)中，一種常見的登錄解決方案是使用Token進(jìn)行身份驗(yàn)證。本文將介紹如何在Vue前端與Egg后端之間實(shí)現(xiàn)這種登錄流程。首先，前端通過封裝Axios，將Token存儲(chǔ)在localStorage中。每次請(qǐng)求時(shí)，都會(huì)自動(dòng)攜帶Token。同時(shí)，設(shè)置response攔截器，處理非2xx狀態(tài)碼的響應(yīng)，如401（Token過期），這時(shí)會(huì)重定向到...
后臺(tái)系統(tǒng)的權(quán)限控制與管理
同一頁面還可能因?yàn)闄?quán)限不同展示不同的按鈕。請(qǐng)求和響應(yīng)的控制 如果用戶通過非常規(guī)操作,比如通過瀏覽器調(diào)試工具將某些禁用的按鈕變成啟用狀態(tài)。此時(shí)發(fā)的請(qǐng)求,也應(yīng)該被前端所攔截。Vue權(quán)限控制的實(shí)現(xiàn)獲取權(quán)限信息 一般權(quán)限信息會(huì)在用戶登錄后由后端返回,具體如何控制權(quán)限要看前端是如何與后端約定的。在查找資料并結(jié)合個(gè)人項(xiàng)...
用vue框架做項(xiàng)目遇到的問題(vue項(xiàng)目常見問題)
為了避免這種情況,你應(yīng)該在Vue應(yīng)用里面覆蓋所有的路由情況,然后在給出一個(gè)404頁面。 參考官網(wǎng)例子: 另一方面,有可能是Vue-Router沒有配置好,需要注意初始化Router時(shí)候的base參數(shù): 如此項(xiàng)目部署就完成了。 感謝博哥指出之前文章錯(cuò)誤之處,已經(jīng)修正,謝謝vue項(xiàng)目中,解決開發(fā)與線上請(qǐng)求接口不同的問題 在Vue開發(fā)當(dāng)中經(jīng)常會(huì)...
(三)Vue實(shí)用框架-Ruoyi(token的獲取)
登錄成功后，會(huì)調(diào)用getToken()方法從cookie中獲取token，隨后在user.js中處理，將token用于獲取用戶權(quán)限并動(dòng)態(tài)生成路由。整個(gè)流程清晰，通過權(quán)限攔截確保用戶只能訪問允許的頁面。在后端驗(yàn)證token時(shí)，查看\/login接口的login()方法，核心是調(diào)用createToken()函數(shù)生成包含用戶信息的JWT令牌。
Vue路由守衛(wèi)有哪些,怎么設(shè)置,有哪些使用場(chǎng)景?
設(shè)置路由守衛(wèi)，可將相關(guān)屬性添加至路由實(shí)例配置對(duì)象。例如，配置全局前置守衛(wèi)如下：應(yīng)用場(chǎng)景包括但不限于：1. 驗(yàn)證用戶權(quán)限：在進(jìn)入頁面前檢查用戶是否已登錄或有權(quán)限訪問。2. 加載數(shù)據(jù)：在頁面進(jìn)入前異步加載必要數(shù)據(jù)。3. 路由重定向：根據(jù)條件重定向用戶至其他頁面。4. 路由攔截：阻止不適當(dāng)?shù)穆酚蓪?dǎo)航，...
vue3路由守衛(wèi)怎么創(chuàng)建?
Vue3實(shí)現(xiàn)路由守衛(wèi)主要使用四種方式：beforeEach、beforeRouteEnter、beforeRouteLeave 和 beforeRouteUpdate。beforeEach守衛(wèi)是全局前置守衛(wèi)，執(zhí)行于每個(gè)路由跳轉(zhuǎn)前，適合進(jìn)行全局路由攔截處理，如驗(yàn)證登錄狀態(tài)或權(quán)限管理等。beforeRouteEnter守衛(wèi)在進(jìn)入組件時(shí)執(zhí)行，此時(shí)組件實(shí)例尚未創(chuàng)建，故無法使用`this`訪問組件。若...
vue+vant登錄頁面demo
實(shí)現(xiàn)登錄邏輯 1. 綁定表單數(shù)據(jù)：使用Vue的數(shù)據(jù)綁定功能，將表單的輸入數(shù)據(jù)與組件的數(shù)據(jù)屬性綁定。2. 處理表單提交：在提交按鈕的點(diǎn)擊事件中，編寫邏輯來處理表單的提交。這可以包括驗(yàn)證用戶輸入的數(shù)據(jù)，然后發(fā)送請(qǐng)求到后端服務(wù)器進(jìn)行驗(yàn)證。3. 響應(yīng)后端響應(yīng)：根據(jù)后端服務(wù)器的響應(yīng)，進(jìn)行相應(yīng)的處理，如顯示錯(cuò)誤...
vue3驗(yàn)證碼組件如何實(shí)現(xiàn)?
具體實(shí)現(xiàn)步驟如下：首先，創(chuàng)建一個(gè)名為Captcha的驗(yàn)證碼組件。在組件內(nèi)部，利用Canvas的繪圖功能，生成包含隨機(jī)圖形和數(shù)字的驗(yàn)證碼圖片。接著，在頁面中引入此組件。在Vue的模板文件中，通過import語句引入Captcha組件，并在需要顯示驗(yàn)證碼的相應(yīng)位置使用component標(biāo)簽調(diào)用組件。此外，組件還提供豐富配置選項(xiàng)，允許...
vue-router(vuerouter鉤子函數(shù))
如果瀏覽器的URL改變了(可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么URL地址會(huì)重置到from路由對(duì)應(yīng)的地址。 next('\/')或者next({path:'\/'}):跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向next傳遞任意位置對(duì)象,且允許設(shè)置諸如replace:true、name:'home'之類的選項(xiàng)以及任何用在router-link...
相關(guān)評(píng)說：
泗洪縣重合： ______ 1. 設(shè)置pin是什么意思電腦的PIN碼是Windows系統(tǒng)為了方便用戶本地登錄而獨(dú)立于window賬戶密碼的快捷登錄密碼,PIN碼全部是【4~6】位數(shù)字密碼.2. 新電腦要設(shè)置pin...
泗洪縣重合： ______ 具體操作: 1、配置普通賬號(hào)通過密鑰驗(yàn)證遠(yuǎn)程SSH登錄服務(wù)器 使用普通賬號(hào)osyunwei.com登錄服務(wù)器操作 ssh-keygen -t rsa #生成密鑰 cd /home/osyunwei.com/.ssh #進(jìn)入目錄 mv id_rsa.pub authorized_keys #生成驗(yàn)證文件 下載服務(wù)器/home...
泗洪縣重合： ______ 1. 首先我們要改變我們要映入的外部js文件,改成以下這個(gè)格式.<br><br><img src=＂https://pic.wenwen.soso.com/pqpic/wenwenpic/0/20220730070408-847965190_jpeg_562_295_18567/0＂/><br><br>代碼:<pre class=＂html＂>function ...
泗洪縣重合： ______ 表單校驗(yàn)是web開發(fā)中一個(gè)重要環(huán)節(jié),當(dāng)用戶輸入錯(cuò)誤的字符或者未輸入字符(必填項(xiàng)),表單校驗(yàn)可以給用戶一個(gè)提示,幫助用戶完善輸入內(nèi)容.Vue.js庫也具有校驗(yàn)功能,利用vue-validator插件實(shí)現(xiàn).下面利用一個(gè)實(shí)例說明表單校驗(yàn)的方法,操作如下:http://jingyan.baidu.com/article/2fb0ba4093b01a00f2ec5fad.html
泗洪縣重合： ______ 解決方法:該錯(cuò)誤產(chǎn)生的原因是由于SQL Server采取了僅使用Windows賬戶的身份驗(yàn)證方式,因此用戶無法使用SQL Server的登錄賬戶(如sa)進(jìn)行連接.解決方法如下所述: 步驟/方法 第1步,在SQL Server服務(wù)器上依次單擊“開始”→“...
泗洪縣重合： ______ 使用form驗(yàn)證即可 第1步:在應(yīng)用程序的根目錄下的Web.config文件中設(shè)置“窗體驗(yàn)證”模式: <authentication mode=“Forms”> <forms loginUrl=“l(fā)ogin.aspx”> //指定未通過驗(yàn)證就請(qǐng)求受限資源時(shí)應(yīng)該自動(dòng)轉(zhuǎn)向的登錄網(wǎng)頁. … </forms> </...
泗洪縣重合： ______ 在Visual Studio 2005連接SQL Server 2000中,我們可能會(huì)知道,連接字符串會(huì)比較簡(jiǎn)單,一般遠(yuǎn)程連接的時(shí)候,只需要在Web.config文件配置如下: sa;pwd=sa;Max pool size=1000;Connect Timeout=20＂ key=＂ConnectionString＂ /> 然后在...
泗洪縣重合： ______ 1.使用sql企業(yè)管理器直接用sa登錄數(shù)據(jù)庫是否正常2登錄正常 應(yīng)該是沒有設(shè)置正確 找到SQL服務(wù)器,在左欄中上面,單擊右鍵,在彈出的菜單中選擇“屬性”命令.彈出一個(gè)對(duì)話框,單擊“安全性”,在“服務(wù)器身份驗(yàn)證”下面選擇 “SQL SERVER和WINDOWS身份驗(yàn)證模式”,在前面打勾!記得這一步很重要,如果沒有這一步你就別想登錄成功!然后單擊“確定”就可以了! 3:重新啟動(dòng)服務(wù)就可以選擇SQL SERVER 身份驗(yàn)證模式登錄了!輸入剛才的用戶名和密碼就可以登錄成功了!3.如果不行QQ 聯(lián)系
