VUE——路由验证和相应拦截的使用

前言

在web项目中，经常需要根据是否登录进行路由的验证和相应的拦截。

存放登录信息

首先，在vuex里的store.js里边写一个存放登录状态，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
   
  state: {
   
    user: false
  },
  mutations: {
   
    // 登录
    login (state, user) {
   
      state.user = user
    },
    // 退出
    logout (state, user) {
   
      state.user = false
    }
  }
})

路由验证

利用 router.beforeEach( (to, from, next) => { }

钩子函数beforeEach三个参数的意义：
①to：即将要进入的目标的路由对象.
②from：当前导航即将要离开的路由对象.
③next：调用该方法后, 才能进入下一个钩子.
next(’/路径’) 指定某个路径

路由验证例子一：下一跳的路由为 ‘/watchHouse’ 或者 ‘/AgentMsg’ ，如果没有登录的话，通过代码 next ({path: ‘/login’}) 跳转到登录的界面。

代码如下：

if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
   
  next({
    path: '/login' })
}

路由验证例子二：在路由 ‘/my’ 下，要跳往 ‘/ToolCompute’ ，如果没有登录的话，跳转到登录页面。

代码如下：

if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
   
  next({
    path: '/login' })
}

全部代码：
对某些路由进行路由验证
目的：如果下一路由为 ‘/login’ 则 next()；如果未登录且下一路由为 ‘/watchHouse’ 或 ‘/AgentMsg’，则 next({ p