Home > Web Front-end > Vue.js > An article to talk about global guards in Vue

An article to talk about global guards in Vue

青灯夜游
Release: 2023-02-21 19:43:44
forward
2271 people have browsed it

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!

An article to talk about global guards in Vue

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

[Related recommendations: vuejs video tutorialweb 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!

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template