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