Vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁的示例代碼
1、登錄頁登錄成功時將服務(wù)端返回的標(biāo)識存放起來
2、在router中給不需要登錄的頁面設(shè)置 meta : { auth : false }，如首頁
3、使用路由前置守衛(wèi)beforEach，由于給路由設(shè)置了meta : { auth : false }，如果是符合該屬性時則不需要跳轉(zhuǎn)登錄頁
4、接下來根據(jù)token是否存入到localstorage來進(jìn)行判斷或者cookie是否存入客戶端做判斷，這里在vuex中做處理
如果token和cookie不存在時則需要跳轉(zhuǎn)到登錄頁
5、在axios中響應(yīng)攔截response中做如下處理
先獲取服務(wù)端返回未登錄的狀態(tài)碼，根據(jù)這個狀態(tài)碼做判斷并將token,cookie置空后跳轉(zhuǎn)到登錄頁
總結(jié)：
1、 to.fullPath將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
2、vue router中meta 字段代表路由元信息，可以通過meta對象中的一些屬性來判斷當(dāng)前路由是否需要進(jìn)一步處理，如果需要處理，按照自己想要的效果進(jìn)行處理即可（此處是不需要跳轉(zhuǎn)登錄頁）
3、路由前置守衛(wèi)beforEach接受三個參數(shù)
（1）to: Route: 即將要進(jìn)入的目標(biāo)
（2）from: Route: 當(dāng)前導(dǎo)航正要離開的路由
（3）next
4、axios全局?jǐn)r截器
（1）請求攔截器
axios.interceptors.request.use（res=>{
? ? ? ? //發(fā)送請求前要做的事兒，例如統(tǒng)一cookie、設(shè)置請求頭header等
? ? ? ? return res
}，(error)=>{
? ? ? ? //請求發(fā)生錯誤時在這里處理
????????return Promise.reject(error)
}）（2）響應(yīng)攔截器
axios.interceptors.response.use(res=>{
? ? ? ? //請求成功時對響應(yīng)數(shù)據(jù)做處理，做數(shù)據(jù)統(tǒng)一處理，常處理登錄失敗與失效
????????return res
?}，(error)=>{????????
? ? //請求失敗時在這里處理
????????return Promise.reject(error)
?})到此這篇關(guān)于Vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁的示例代碼的文章就介紹到這了,更多相關(guān)Vue 未登錄跳轉(zhuǎn)到登錄頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue報錯Error:Cannot?find?module?'fs/promises'的解決方
最近的項目需要用到vue/cli,但是用cnpm安裝vue/cli的時候報錯了,下面這篇文章主要給大家介紹了關(guān)于vue報錯Error:Cannot?find?module?'fs/promises'的解決方式,需要的朋友可以參考下2022-11-11
vue單應(yīng)用在ios系統(tǒng)中實現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實現(xiàn)微信分享功能操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Teleport是一個內(nèi)置組件，它可以將一個組件內(nèi)部的一部分模板“傳送”到該組件的?DOM?結(jié)構(gòu)外層的位置去，本文就來介紹一下如何使用，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了vue父子組件slot插槽的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個基于Typescript開發(fā)的針對Vue3開發(fā)的UI組件庫,由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下2023-08-08
antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
使用Vue3和Plotly.js繪制動態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動態(tài)加載到圖表中并進(jìn)行實時更新,本文將展示如何使用Plotly.js和Vue.js實現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題
這篇文章主要介紹了解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3 DOM是Vue.js框架的一部分，用于處理與瀏覽器DOM相關(guān)的操作，它提供了一組API和工具，使開發(fā)者能夠輕松地操作和管理DOM元素，本文給大家介紹了Vue3獲取元素DOM的兩種方法：ref模板引用和傳統(tǒng)方法，并有詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04