vue vue-routerブロックによるログイン検証

実際の開発では、vue-router+vuex+elemt-ui+axiosで実現するためにログインしてからアクセスするページもあります.
次に、シナリオ・コードを示します.
login.vue

  import {mapActions,mapState} from 'vuex'
  export default {
    name: 'login',
    props: [''],
    data() {
      return {
        username: "",
        userpsd: "",
      };
    },

    computed: {
      ...mapState(["userinfo", "isLogin"])
    },

    mounted() {
      console.log(this.$route.params.path);
    },

    methods: {
      ...mapActions(["getUserInfo"]),
      toLogin() {
        if (this.username == "") {//         
          return;
        } else if (this.userpsd == "") {//        
          return;
        } else {
          let data = {};
          data.username = this.username;
          data.password = this.userpsd;
          this.getUserInfo(data).then(() => {
              if (this.isLogin) {
                //        ，         ，              
                sessionStorage.setItem("userinfo", JSON.stringify(this.userinfo));
                //        
                sessionStorage.setItem("isLogin", true);
                //            
                this.$router.push({
                  path: this.$route.params.path
                });
              } else {//     to do sth
                sessionStorage.setItem("userinfo", '');
                sessionStorage.setItem("isLogin", '');
              }
            })
            .catch(err => {
              console.log(err);
            });

        }
      },
    }

  }

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
const home = r => require.ensure([], () => r(require('@/components/home')), 'home');
const personCenter= r => require.ensure([], () => r(require('@/components/personCenter')), 'personCenter');
const login = r => require.ensure([], () => r(require('@/components/login')), 'login');
const notFound = r => require.ensure([], () => r(require('@/components/notFound')), 'notFound');

Vue.use(Router);
const router = new VueRouter({
    routes: [{
            path: '/home',
            name: 'home',
            component: home
        },
        {
            path: '/personCenter',
            name: 'personCenter',
            component: personCenter,
            meta: {
                need2Login: true
            }
        },
        {
            path: '/login',
            name: 'login',
            component: login,
        },
        {
            path: "/404",
            name: "notFound",
            component: notFound
        },
        {
            path: "*", //             
            redirect: "/404"
        },

    ]

})
router.beforeEach((to, from, next) => { //      
    to.matched.some((route) => {
        // to.matched.forEach((route) => {
        if (route.meta.need2Login) { //                 
            if (store.state.isLogin || sessionStorage.getItem('isLogin')) {
                next()
            } else {
                next({ name: 'login', params: { path: route.path } })
            }
        } else {
            next();
        }
    });

});
export default router;

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'

Vue.use(Vuex);

const state = {
    userinfo: {}, //    
    isLogin: '', //     
}

export default new Vuex.Store({
    state,
    actions,
    mutations,
})

store/mutation-types.js

export const GETUSERINFO = 'GETUSERINFO'

store/action.js

import {login} from '@/service/api'
export default {
    async getUserInfo({ state, commit }, payload) {
        let res = await login(payload);
        if (res.result.code === 10000) {//    dispatch
            commit('GETUSERINFO', { info: res.data, isLogin: true })
        } else {
            commit('GETUSERINFO', { info: res, isLogin: false })
        }

    }
}

store/mutations.js

import { GETUSERINFO } from './mutation-types'

export default {
    [GETUSERINFO](state, { info, isLogin }) {
        state.userinfo = info;
        state.isLogin = isLogin;
    }
}

service/api.js

import ajax from './apiConfig';

export const login = (data) => {
    return ajax.post('/app/login', data)
}

service/apiConfig.js

import axios from 'axios';
import qs from 'qs';

//    POST    
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//         ，      (     'PUT', 'POST'   'PATCH'        )
axios.defaults.transformRequest = [(data) => { return qs.stringify(data) }]


//      then/catch  ，        
// axios.defaults.transformResponse = [(data) => { return JSON.parse(data) }]

//    CORS   
//                
axios.defaults.withCredentials = true;

axios.defaults.crossDomain = true;

//     
axios.defaults.timeout = 40000;


//       
// 1、interceptor           。
// 2、   axios      interceptor，       axios                 ，       axios.create()       axios  。
//    
const baseUrl='';

//   axios  
let instance = axios.create({
    baseURL: baseUrl
})


// Add a request interceptor
instance.interceptors.request.use(function(config) {
    return config;
}, function(error) {
    return Promise.reject(error);
});

// Add a response interceptor
instance.interceptors.response.use(function(response) {
    // Do something with response data

    return response.data;
}, function(error) {
    // Do something with response error

    return Promise.reject(error);
});

 export { instance };