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