vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法
環(huán)境：vue 2.9.3; webpack;vue-router
目的：實現(xiàn)未登錄跳轉(zhuǎn)
例子：直接在url地址欄輸入...../home,但是這個頁面要求需要登陸之后才能進入,判斷的值就通過登陸之后給本地緩存存入的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) { // 判斷當前的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)到登錄頁面，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
今天小編就為大家分享一篇解決VUE雙向綁定失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
何時/使用 Vue3 render 函數(shù)的教程詳解
這篇文章主要介紹了何時/使用 Vue3 render 函數(shù)的教程詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
對于Vue為何采用異步渲染，簡單來說就是為了提升性能，因為不采用異步更新，在每次更新數(shù)據(jù)都會對當前組件進行重新渲染，為了性能考慮，Vue會在本輪數(shù)據(jù)更新后，再去異步更新視圖，本文主要通過幾個實例給大家介紹一下Vue為何采用異步渲染,需要的朋友可以參考下2023-06-06
vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
公眾中經(jīng)常會有這種場景,一些合同、協(xié)議等的頁面需要進行下載,而且需要和頁面保持一致,下面這篇文章主要給大家介紹了關(guān)于Vue頁面生成PDF的最佳方法,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了淺談vux之x-input使用以及源碼解讀，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了在vue中axios設(shè)置timeout超時的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
最近用vue框架做了個后臺管理項目,涉及權(quán)限,所以下面這篇文章主要給大家介紹了關(guān)于vue2/vue3路由權(quán)限管理的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue中的傳值及賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Tailwind CSS是一個流行的前端CSS框架,它基于原子設(shè)計原則,提供了一套預構(gòu)建的CSS樣式類,旨在幫助開發(fā)者快速地創(chuàng)建響應式、可定制的用戶界面,本文給大家介紹了Vue2中使用tailwindCss的詳細教程,需要的朋友可以參考下2024-09-09