vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
1. 在router/index.js進(jìn)行驗(yàn)證
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 // 要求驗(yàn)證的頁(yè)面,在此情況下其子頁(yè)面也會(huì)被驗(yàn)證. }, children: [{ path: '/paChong', name: 'PaChong', component: PaChong } ] } ] }) router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // 哪些需要驗(yàn)證 if (!sessionStorage.getItem("token")) { // token存在條件 next({ path: '/', // 驗(yàn)證失敗要跳轉(zhuǎn)的頁(yè)面 query: { redirect: to.fullPath // 要傳的參數(shù) } }) } else { next() } } else { next() // 確保一定要調(diào)用 next() } }) export default router
以上這篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue狀態(tài)管理庫(kù)Pinia詳細(xì)介紹
這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是 vue3 新的狀態(tài)管理工具,簡(jiǎn)單來(lái)說(shuō)相當(dāng)于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,需要的朋友可以參考下2022-08-08基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue-element-admin如何轉(zhuǎn)換成中文
這篇文章主要介紹了vue-element-admin如何轉(zhuǎn)換成中文問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue中數(shù)據(jù)不響應(yīng)的問(wèn)題及解決
這篇文章主要介紹了vue中數(shù)據(jù)不響應(yīng)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
這篇文章主要介紹了Vue3路由組件內(nèi)的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Vue2.0表單校驗(yàn)組件vee-validate的使用詳解
本篇文章主要介紹了Vue2.0表單校驗(yàn)組件vee-validate的使用詳解,詳細(xì)的介紹了vee-validate使用教程。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過(guò)實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11