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