An article to talk about global guards in Vue

How to perform global guarding in Vue? The following article will talk about global guards in Vue. I hope it will be helpful to you!

Preface: Most projects use routing to jump, but generally login verification is required before entering the next page. At this time, guards are needed. Okay, this blog post mainly explains the global guard in vue.

Global guard

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

[Related recommendations: vuejs video tutorial、web front-end development】

Parameter details:

• "to": About to The target routing object to enter; (including name, params, meta and other attributes)

• "from": the routing object that the current navigation is about to leave; (including name, params, meta, etc.) Properties)

• "next": Make sure to call the next() method, otherwise the hook will not be resolved. Some parameters can also be passed in this.

Hook function: When an event is triggered, the hook function captures it at the system level and then performs some operations. A program for handling system messages. "Hook" is to give you an opportunity to do certain processing at a certain stage.

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of An article to talk about global guards in Vue. For more information, please follow other related articles on the PHP Chinese website!