vue全局守卫

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

全局守卫

全局守卫分为全局前置守卫、全局解析守卫和全局后置钩子。

当一个导航触发时，全局前置守卫按照创建的顺序调用。守卫可以是异步解析执行，此时导航所有守卫解析完之前一直处于挂起状态。

全局前置守卫使用router.beforeEach注册，代码如下：

在index.js里面注册

router.beforeEach((to,form,next)=>{
    next()
})

路由有三个参数：to、from、next；

to：表示即将进入的目标路由对象

from：表示当前导航正要离开的路由对象

next：是一个函数对象，必须调用该函数在哪解析钩子

next（）：调用该函数，一个next（）调用一次

全局解析守卫使用router.beforeResolve注册。他和router.beforeEach类似，区别在与，在导航被确认之前，在所有组件内守卫和异步路由组件被解析之后，解析守卫被调用

router.beforeResolve注册，代码如下：

router.beforeResolve((to,from,next)=>{
    
})

全局后置钩子使用router.afterEach注册，他在导航被确认之后调用，与守卫不同的是，全局后置钩子不接受next函数，也不会改变导航

router.afterEach注册，代码如下：

router.afterEach((to,from)=>{
    
})

演示代码：

index.js代码

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

router.beforeEach((to, form, next) => {
        if (to.path == '/login') {
            next()
        } else {
            if (sessionStorage.isLogin == true) {
                next()
            } else {
                next({
                    path: '/login',
                    query: { redirect: to.fullPat }
                })
            }
        }
    }

)

注意路由守卫一定要写在

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

后面

login.vue代码

<template>
  <div>
    <h1>{{info}}</h1>

    <p><label>用户名：</label> <input type="text" v-model.trim="username"></p>
    <p><label>密码：</label> <input type="password" v-model.trim="password"></p>
    <input type="submit" value="登录" @click.prevent="login">
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      info: ''
    }
  },
  // 方法
  methods: {
    login() {
      if ('hgk' == this.username && '123456' == this.password) {
        sessionStorage.setItem('isLogin', true)
        this.info = ''
        if (this.$route.query.redirect) {
          this.info = redirect = this.$route.query.redirect
          console.log(redirect)
          this.$router.replace(redirect)
        } else {
          this.$router.replace('/')
        }
      } else {
        sessionStorage.setItem('isLogin', false)
        this.username = ''
        this.password = ''
        this.info = '用户名或者密码错误'
      }
    }
  }
}
</script>