站長資訊網
Vue中怎么進行全局守衛？下面本篇文章帶大家聊聊Vue中的全局守衛，希望對大家有所幫助！
前言：項目中大多數都是通過路由來進行跳轉的，但是普遍的都會進行登陸驗證后才能進入下一頁面，這時候就需要守衛了，本博文主要講解vue中的全局守衛 。
全局守衛
在main.js中進行配置：
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 全局守衛 router.beforeEach((to, from, next) => { // 獲取登陸狀態 let isLogin = sessionStorage.getItem('sid') //存儲的sessionStorage的信息，登陸時使用sessionStorage.setItem('sid', '已登錄') 設置本地存儲信息 if (to.name === 'login') { // 如果是登錄頁，則跳過驗證 next() //鉤子函數 return } if (!isLogin) { // 判斷登陸狀態,sessionStorage不存在的情況下 ElementUI.Message({ //提示消息 message: '請先登錄系統', type: 'error' }) next({ name: 'login' }) // 如果未登錄，則跳轉到登錄頁 } else { next() // 如果已經登陸，那就可以跳轉 } })
登錄后復制
【
