vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法
環(huán)境：vue 2.9.3; webpack;vue-router
目的：實現(xiàn)未登錄跳轉(zhuǎn)
例子：直接在url地址欄輸入...../home,但是這個頁面要求需要登陸之后才能進(jìn)入,判斷的值就通過登陸之后給本地緩存存入的token判斷，如果沒有就跳轉(zhuǎn)到登錄頁面，有的話就打開。
圖示：
1、直接在url地址欄輸入http://127.0.0.1:9000/#/home,但是頁面會直接跳轉(zhuǎn)到登錄頁，而且會帶上參數(shù)。
--------------------------------------------分割線----------------------------------------------
vue-router需要安裝
首先配置路由
/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',// 登錄
name: 'Login',
component: resolve => require(['@/PACS/pages/Login'],resolve)
},{
path: '/home',
name: 'Home',
meta: {
requireAuth: true, // 判斷是否需要登錄
},
component: resolve => require(['@/PACS/pages/Home'],resolve)
}
]
})
## 增加了字段 requireAuth 用來判斷該路由是否需要登錄。
然后配置main.js
// 路由判斷登錄 根據(jù)路由配置文件的參數(shù)
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)){ // 判斷該路由是否需要登錄權(quán)限
console.log('需要登錄');
if (localStorage.token) { // 判斷當(dāng)前的token是否存在 ； 登錄存入的token
next();
}
else {
next({
path: '/',
query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
})
}
}
else {
next();
}
});
這里是登錄時存入的token
##這樣的話登錄時就會直接跳轉(zhuǎn)到登錄頁面。
實現(xiàn)登錄成功后再跳回開始輸入的頁面，就要用到后面?zhèn)鬟f的值了。
如果包含redirect就跳轉(zhuǎn)到剛剛輸入的頁面。
注意：如果將用戶數(shù)據(jù)保存到localstorage是不合理的，這里只是給出一種思路，如果登陸之后不清空瀏覽器數(shù)據(jù)，token一直存在的，判斷就會失效。
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue中父子組件的值傳遞與方法傳遞，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，json數(shù)組數(shù)據(jù)以csv格式導(dǎo)出,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
我們最開始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實現(xiàn),本文就詳細(xì)的介紹一下,感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
vue3(optionApi)使用Element Plus庫沒有效果的解決方式
這篇文章主要介紹了vue3(optionApi)使用Element Plus庫沒有效果的解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端詳解
在做項目的時候遇到一個問題,前端需要上傳表單到后端,表單數(shù)據(jù)包括文本內(nèi)容和圖片,這篇文章主要給大家介紹了關(guān)于Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端的相關(guān)資料,需要的朋友可以參考下2022-04-04
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
element el-table表格的二次封裝實現(xiàn)(附表格高度自適應(yīng))
這篇文章主要介紹了element el-table表格的二次封裝實現(xiàn)(附表格高度自適應(yīng))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了Vue中的MVVM模式使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue傳值-三種常用傳值示例，主要介紹了父組件向子組件進(jìn)行傳值，子組件向父組件傳值和非父子組件進(jìn)行傳值，感興趣的小伙伴們可以參考一下2018-07-07