干就完了

項目中經常遇到這樣一個場景，用戶信息或者進行增刪改的一些模塊，需要根據用戶是否登錄，進行路由攔截，直接上代碼

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

轉載于:https://www.cnblogs.com/haoluck/p/9226250.html

總結

以上是生活随笔為你收集整理的vuex+vue-router拦截的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。