vue在路由中驗證token是否存在的簡單實現(xiàn)
更新時間:2019年11月11日 16:58:46 作者:sowhat_WLQ
今天小編就為大家分享一篇vue在路由中驗證token是否存在的簡單實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
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 // 要傳的參數(shù) } }) } else { next() } } else { next() // 確保一定要調用 next() } }) export default router
以上這篇vue在路由中驗證token是否存在的簡單實現(xiàn)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值)
這篇文章主要介紹了Vue組件傳值方式(props屬性,父到子,子到父,兄弟傳值),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06Vue3路由組件內的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用
這篇文章主要介紹了Vue3路由組件內的路由守衛(wèi)onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05