vue-router vuex 用户信息管理

实现原理： 每次进行路由跳转检测全局下用户信息状态是否存在

新建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

 

转载于:https://www.cnblogs.com/eightabs/p/10790936.html