Vue의 글로벌 가드에 대해 이야기하는 기사

Vue에서 전역 보호를 수행하는 방법은 무엇입니까? 다음 기사에서는 Vue의 글로벌 가드에 대해 설명하겠습니다. 도움이 되기를 바랍니다.

서문: 대부분의 프로젝트는 점프를 위해 라우팅을 사용하지만 일반적으로 다음 페이지로 들어가기 전에 가드가 필요합니다. 이 블로그 게시물은 vue의 전반적인 상황을 주로 설명합니다.

Global Guard

main.js에서 구성: 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。这个当中还可以传一些参数。

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

[관련 권장 사항: vuejs 비디오 튜토리얼

、웹 프론트엔드 개발】매개변수에 대한 자세한 설명:

🎜

• 🎜"to": 입력할 대상 라우팅 개체(이름, 매개변수, 메타 및 기타 속성 포함)🎜
• 🎜"from": 현재 탐색이 종료하려는 라우팅 개체(이름, 매개변수, 메타 및 기타 속성 포함)🎜
• 🎜"next": next() 메서드를 사용하지 않으면 후크가 해결되지 않습니다. 일부 매개변수도 여기에 전달될 수 있습니다. 🎜

🎜후크 기능: 이벤트가 발생하면 후크 기능이 이를 시스템 수준에서 캡처한 후 일부 작업을 수행합니다. 시스템 메시지를 처리하는 프로그램입니다. "Hook"은 특정 단계에서 특정 처리를 수행할 수 있는 기회를 제공하는 것입니다. 🎜🎜 (학습 영상 공유: 🎜vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue의 글로벌 가드에 대해 이야기하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!