vuex+vue-router拦截

干就完了

项目中经常遇到这样一个场景，用户信息或者进行增删改的一些模块，需要根据用户是否登录，进行路由拦截，直接上代码

在store文件夹下的store.js中存放一个默认登录状态

/*
* store.js
* */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
user: false,
todos: []
}

const mutations = {
//登录
login(state,user){
state.user = user
},
//退出
logout(state,user){
state.user = false
}
}

export default new Vuex.Store({
state,
mutations
})

在main.js中进行配置

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import store from './store/store'
Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({
mode:'history',
routes:[
{
path:'/',
component:(resolve) => {
require(['./components/Home'],resolve)
}
},{
path:'/login',
name:'login',
component:resolve => require(['./components/Login'],resolve)
},{
path:'/contact',
name:'contact',
// 需要登录才能进入的页面可以增加一个meta属性
meta:{
requireAuth: true
},
component:resolve => require(['./components/Contact'],resolve)
},{
path:'*',
component:resolve => require(['./components/Error'],resolve)
}
]
})

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

// 判断是否需要登录权限
if(to.matched.some(res => res.meta.requireAuth)){
if(!store.state.user && to.matched.some(function (item) { return item.path == '/contact' })){
next('/login')
}else{
next()
}
}else{
next()
}

})

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: ''
})

在Login组件中进行登录和登出

ok，完美