vue在路由中驗證token是否存在的簡單實現
更新時間：2019年11月11日 16:58:46 作者：sowhat_WLQ
今天小編就為大家分享一篇vue在路由中驗證token是否存在的簡單實現，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1. 在router/index.js進行驗證
2. 代碼如下：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/common/Login';
......
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
name: Login,
component: Login,
},
{
path: '/home',
component: Home,
meta: {
requiresAuth: true // 要求驗證的頁面,在此情況下其子頁面也會被驗證.
},
children: [{
path: '/paChong',
name: 'PaChong',
component: PaChong
}
]
}
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) { // 哪些需要驗證
if (!sessionStorage.getItem("token")) { // token存在條件
next({
path: '/', // 驗證失敗要跳轉的頁面
query: {
redirect: to.fullPath // 要傳的參數
}
})
} else {
next()
}
} else {
next() // 確保一定要調用 next()
}
})
export default router
以上這篇vue在路由中驗證token是否存在的簡單實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具，簡單來說相當于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了基于Vue組件化的日期聯動選擇器的實現代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue清空form對象的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue-element-admin如何轉換成中文問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue中數據不響應的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3路由組件內的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
這篇文章主要介紹了Vue3路由組件內的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細介紹了vue實現簡單圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
本篇文章主要介紹了Vue2.0表單校驗組件vee-validate的使用詳解，詳細的介紹了vee-validate使用教程。具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數據和方法,實現跨層組件通信,本文通過實例介紹Vue3 provide和inject的相關知識,感興趣的朋友一起看看吧2023-11-11