vue + Spring Security + Oauth2.0 优雅登录解决方案

permission.js 最优雅的实现方案，直接上代码！

"use strict";
import _Router from './router/router';
import store from './store';
import {_sessionStatus, _sessionMe} from "@/api/session-api";

const WHITELIST = [
   '/sign/in',
   '/sign/up',
   '/error/401',
   '/error/403',
   '/error/404',
   '/error/500'
];

_Router.beforeEach((to, from, next) => {
   console.log('Permission > beforeEach > userSession', store.getters.userSession);
   _routerInterceptor(to, from, next);
});

_Router.afterEach((to, from) => {
   console.log('permission afterEach > ', to, from);
});

function _routerInterceptor(to, from, next) {
   console.log('Permission > _routerInterceptor > ', 'from : ', from.path, 'to : ', to.path, to.query);

   // 1 白名单
   if (WHITELIST.indexOf(to.path) !== -1) {
      console.log('Permission router > interceptor > WHITE_LIST');
      _routerHandler(to, from, next);
      return;
   }

   // 2 已经登录
   if (store.getters.userSession) {
      console.log('Permission router > interceptor > AUTHORIZED');
      _routerHandler(to, from, next);
      return;
   }

   // 3 登录回调
   if (!store.getters.userSession) {
      console.log('Permission router > interceptor > ANONYMOUS');
      _getSessionStatus(to, from, next)
   }
};

function _getSessionStatus(to, from, next) {
   _sessionStatus().then(res => {
      if (res.data.session && res.data.session === 'ANONYMOUS') {
         _routerHandler(to, from, next, '/sign/in');
      } else if (res.data.session && res.data.session === 'AUTHORIZED') {
         console.log('Permission router > interceptor > AUTHORIZED');
         _getUserSession(to, from, next);
      }
   }).catch(err => {});
}

function _getUserSession(to, from, next) {
   _sessionMe().then(res => {
      store.dispatch('setUserSession', res.data).then(res => {
         _routerHandler(to, from, next);
      });
   }).catch(err => {});
}

function _routerHandler(to, from, next, redirect) {
   console.log('Permission router > _routerHandler > ', 'from : ', from.path, 'to : ', to.path, to.query);
   if (store.getters.userSession && !_Router.initialized) {
      _initializeRouter(to, from);
      console.log('Permission router > _routerHandler > proxy pass');
      next({
         path: to.path,
         query: to.query
      });
      return;
   }
   if (redirect) {
      console.log('Permission router > _routerHandler > redirect', redirect);
      next({
         path: redirect
      });
   } else {
      console.log('Permission router > _routerHandler > forward');
      next();
   }
}

function _initializeRouter(to, from, next) {
   if (store.getters.userSession && store.getters.userSession.org) {
      if (store.getters.userSession.org.type === 'ENTERPRISE') {
         // _Router.addRoutes(_Router); TODO 路由按权限拆分
         console.log('Permission router > initialize > ENTERPRISE', _Router);
      }
      if (store.getters.userSession.org.type === 'ROOT') {
         // _Router.addRoutes(_Router);
         console.log('Permission router > initialize > ADMIN ', _Router);
      }
      _Router.initialized = true;
   }
};

_Router.onError((error) => {
   const pattern = /Loading chunk (\d)+ failed/g;
   const isChunkLoadFailed = error.message.match(pattern);
   const targetPath = router.history.pending.fullPath;
   if (isChunkLoadFailed) {
      router.replace(targetPath);
   }
});