干就完了
项目中经常遇到这样一个场景，用户信息或者进行增删改的一些模块，需要根据用户是否登录，进行路由拦截，直接上代码
在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: '<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，完美
