vue 利用路由守衛(wèi)判斷是否登錄的方法
1.在router下的index.js 路由文件下,引入相關(guān)需要文件;
import Vue from 'vue' import Router from 'vue-router' import {LOGIN} from '../common/js/islogin' import HelloWorld from '@/components/HelloWorld' import Login from '@/page/Login' import Index from '@/page/index/index'Vue.use(Router);
2.配置相關(guān)路由
const router = new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/index', meta: { requireAuth: true, // 添加該字段,表示進(jìn)入這個路由是需要登錄的 }, component: Index } ] });
3.路由配置完后,根據(jù)需要登錄的頁面判斷路由跳轉(zhuǎn)
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { //如果需要跳轉(zhuǎn) ,往下走(1) if (true) { //判斷是否登錄過,如果有登陸過,說明有token,或者token未過期,可以跳過登錄(2) if (to.path === '/login') { //判斷下一個路由是否為要驗(yàn)證的路由(3) next('/index'); // 如果是直接跳到首頁, } else { //如果該路由不需要驗(yàn)證,那么直接往后走 next(); } } else { console.log('沒有'); //如果沒有登陸過,或者token 過期, 那么跳轉(zhuǎn)到登錄頁 next('/login'); } } else { //不需要跳轉(zhuǎn),直接往下走 next(); } });export default router;
以上這篇vue 利用路由守衛(wèi)判斷是否登錄的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js bootstrap前端實(shí)現(xiàn)分頁和排序
這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁和排序效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03解決vue初始化項(xiàng)目時,一直卡在Project description上的問題
今天小編就為大家分享一篇解決vue初始化項(xiàng)目時,一直卡在Project description上的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue組件 $children,$refs,$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs,$parent的使用詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì)
這篇文章主要介紹了詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實(shí)現(xiàn)
​ vue-element-admin是一個純前端的框架,左側(cè)菜單是根據(jù)路由生成的。實(shí)際開發(fā)中經(jīng)常需要根據(jù)當(dāng)前登陸人員的信息從后端獲取菜單進(jìn)行展示,本文將詳細(xì)介紹如何實(shí)現(xiàn)該功能2021-04-04vueJs函數(shù)toRaw?markRaw使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)toRaw?markRaw使用對比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03基于vue-element組件實(shí)現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實(shí)現(xiàn)音樂播放器功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05