Artikel untuk bercakap tentang pengawal global di Vue

Bagaimana untuk melakukan pengawalan global dalam Vue? Artikel berikut akan membincangkan tentang pengawal global di Vue. Saya harap ia akan membantu anda!

Pendahuluan: Kebanyakan projek menggunakan penghalaan untuk melompat, tetapi secara umumnya pengesahan log masuk diperlukan sebelum memasuki halaman seterusnya Pada masa ini, pengawal diperlukan Okay, catatan blog ini menerangkan pengawal global dalam vue.

Pengawal global

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

[Cadangan berkaitan: tutorial video vuejs , pembangunan bahagian hadapan web]

Butiran parameter:

• "kepada": sasaran yang anda kira untuk memasukkan objek penghalaan; (mengandungi nama, params, meta dan atribut lain)

• "dari": objek penghalaan yang akan ditinggalkan oleh navigasi semasa (mengandungi nama, param, meta dan atribut lain)

• "next": Pastikan untuk memanggil kaedah next(), jika tidak cangkuk tidak akan resolveded. Beberapa parameter juga boleh diluluskan dalam hal ini.

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

(Belajar perkongsian video: tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Artikel untuk bercakap tentang pengawal global di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!