站长资讯网
Vue中怎么进行全局守卫？下面本篇文章带大家聊聊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() // 如果已经登陆，那就可以跳转 } })
登录后复制
【
