Heim > Web-Frontend > View.js > Hauptteil

Ein Artikel über globale Wächter in Vue

青灯夜游
Freigeben: 2023-02-21 19:43:44
nach vorne
2202 Leute haben es durchsucht

Vue中怎么进行全局守卫?下面本篇文章带大家聊聊Vue中的全局守卫,希望对大家有所帮助!

Ein Artikel über globale Wächter in 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() // 如果已经登陆,那就可以跳转
  }
})
Nach dem Login kopieren

【相关推荐:vuejs视频教程web前端开发

参数详解:

  • “to”: 即将要进入的目标路由对象;(包含name,params,meta等属性)

  • “from”: 当前导航正要离开的路由对象;(包含name,params,meta等属性)

  • “next”: 确保要调用 next() 方法,否则钩子就不会被 resolved。这个当中还可以传一些参数。

钩子函数:钩子函数是在一个事件触发的时候,在系统级捕获到了他,然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。

(学习视频分享:vuejs入门教程编程基础视频

Das obige ist der detaillierte Inhalt vonEin Artikel über globale Wächter in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage