前言
在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