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: '<App/>'
})

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

<template>
  <div id="login"> 
    <button @click="loginIn">登录</button>  
    <button @click="loginOut">登出</button>  
  </div>
</template>
<script>
import store from '../store/store'
  export default({
    name:'login',
    store,
    methods:{
    	loginIn(){
			store.commit('login',true);
    	},
    	loginOut(){	         
    	    store.commit('logout',false);
    	}
    }
  })
</script>

ok，完美