前端应该如何做单点登录，跨域处理等

楼主关于单点登录狠狠的踩了一次坑，这事完结了以后再回首之前的做法觉得自己好傻 ?

单点登录

什么是单点登录呢 ?

单点登录（Single Sign On），简称为SSO，是目前比较流行的企业业务整合的解决方案之一。 SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统

了解之后，那么我们的需求是 ?

1. 当第三方点击某个菜单(或按钮)时，我(前端)要向第三方发送一个jsonp请求获取令牌(token)
2. 获取到令牌之后，以这个令牌为参数，向后端发送验证请求，后端拿到令牌之后去redies里找到用户信息进行登录，返回数据给前端，over

Do it !我们的法宝 ------ 路由拦截 ✨

全局前置守卫 beforeEach

官方解说

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

也就是说，我们只要在路由文件里做一个路由前置守卫就可以搞定了，发请求登陆成功之后，该跳哪个页面跳哪个页面，登陆失败就跳转到第三方的登录页面。

**话不多说，接下来代码警告 **

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import sso from './sso'
Vue.use(Router)

const routes = [
    //...
]

const router = new Router({
    routes,
})

router.beforeEach(sso)

sso.js

import Vue from 'vue'
import $ from "jquery";
const ssoRedirect = '/home'
const xxxUrl = 'http://xxx' // 第三方地址
export default async function(to, from, next) {
  if (to.path !== '/aaa/bbbLogin') {
    next()
  } else if(to.path === '/aaa/bbbLogin') {
    $.ajax({
      async: false,
      type: "GET",
      dataType: 'jsonp',
      jsonp: 'callback',
      jsonpCallback: 'jsonpCallback',
      url: xxxUrl + '/direct/saveSSOtoken',
      success: function (msg) {
        console.log(msg)
        $.ajax({
          url: global.baseUrl + '/gateway/extra_login',
          data: msg,
          type: "POST",
          async: false,
          dataType: "json",
          success: function(res) {
            if (res.code == 0) {
              cache.setItem('tgt_id', res.data) // 保存登录的票据
              store.commit('setToken', res.data)
              next(ssoRedirect)
            } else {
              console.log('跳转到第三方登录页面')
              window.location.href = xxxUrl + '/direct/'
            }
          },
          error: function (err) {
            console.log(err)
            window.location.href = xxxUrl + '/direct/'
          }
        });
      }
    })
  } else {
    Vue.prototype.$message({
      type: 'error',
      message: '登录失败',
    })
  }
}

以上。

ps: 之前的做法是在主页面的created()里面去发送请求，勉勉强强可以用，但是非常之麻烦，因为本身项目是可以用户名密码登录的，做这个单点登录时没有考虑到同时不能影响到正常登录，所以，emm…改良了现在这种方式，还是文档看少了?