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