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