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 = falseconst 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，完美