实现原理： 每次进行路由跳转检测全局下用户信息状态是否存在
新建store.js文件
import Vue from 'vue'；
import Vuex from 'vuex'； Vue.use(Vuex)； let store = new Vuex.Store({
state: {
userInfo: null
},
mutations: {
GETSTATE (state, data) {
state[data.name] = data.value；
}
},
actions: {
getState (context, data) {
context.commit('GETSTATE', data)；
}
}
}) export default store
新建router.js文件
import Vue from 'vue';
import Router from 'vue-router';
import store from '@/stores';
import api from '@/api';
Vue.use(Router);
import layout from '@/components/layout/layout.vue';
const router = new Router({
routes: [
{
path: '/',
redirect: {
name: 'home'
}
},{
name: 'main',
path: '/main',
component: layout,
children: [
{
name: 'home',
path: '/home',
component: component: () => import('@/views/home/home')
}
]
}
]
})
router.beforeEach((to, from, next) => {
// 验证是否登录
if (store.state.userInfo) {
next();
} else {
api.base.getUserInfo().then((res) => {
if (res) {
store.dispatch('getState', { name: 'userInfo', value: res.data });
next();
}
})
}
})
export default router