一文聊聊Vue中的全域守衛

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() // 如果已经登陆，那就可以跳转
  }
})

【相關推薦：vuejs影片教學、web前端開發】

參數詳解：

• ##「to」: 即將要進入的目標路由物件;（包含name，params，meta等屬性）

• #「from」: 目前導航正要離開的路由物件；（包含name，params，meta等屬性)

• 「next」: 確保要呼叫

  next() 方法，否則鉤子就不會被resolved。這個當中還可以傳一些參數。

鉤子函數：鉤子函數是在一個事件觸發的時候，在系統級捕獲到了他，然後做一些操作。一段用以處理系統訊息的程式。 「鉤子」就是在某個階段給你一個做某些處理的機會。

（學習影片分享：

vuejs入門教學、程式設計基礎影片）

以上是一文聊聊Vue中的全域守衛的詳細內容。更多資訊請關注PHP中文網其他相關文章！