使用js-cookie实现两个vue项目的单点登录

需求是这样的：之前用vue做的两个系统，现在由于业务需要，要实现两个系统之间的相互跳转以及登录联动。

分析需求：也就是说在登录了任意一个系统的情况下，另一个系统也默认登录，同理，任意一个系统退出登录另一个系统也要退出登录，也就是说我们要实现退出联动。

两个系统之前都是利用localStorage进行存储登录相关信息的，但是localStorage无法实现跨域访问，那么我就想到cookie是可以通过设置domain来实现一级域名相同的两个系统之间实现跨域访问的，所以就想到使用js-cookie这个插件来实现对cookie的操作，下面列出js-cookie的简单使用以及主要逻辑代码片段。

注意：因为不想动两个系统之前localStorage的存储逻辑，所以实现单点登录这个需求的时候，仅仅是加入了cookie的存储逻辑，实现了两个系统的跨域访问登录信息，也就是说我这边是两种存储方式都用到了，当然也可以全部改成同一用cookie,我这里为了快速实现并规避风险就没有统一。

一、安装

npm install js-cookie --save

二、引入

import Cookies from 'js-cookie'

三、主要逻辑代码讲解

在登陆成功时进行cookie的存储:

Cookies.set('tokenInfo', tokenInfo, { expires: 1000, path: '', domain: 'xx.xxx' })

在登陆界面的created钩子中进行cookie的判断以及处理：

    if (Cookies.get('tokenInfo')) {
      setStorage('userInfo', JSON.stringify(JSON.parse(Cookies.get('tokenInfo')).userInfo))
      setStorage('ents', JSON.stringify(JSON.parse(Cookies.get('tokenInfo')).ents))
      setToken(JSON.parse(Cookies.get('tokenInfo')).token)
      this.$router.push({ path: '/' })
    }

在退出登录的时候不仅要删除localStorage还要同时删除cookie:

Cookies.remove('tokenInfo', { domain: 'xx.xxx' })

此外，为了实现在一个系统退出登录了之后，在另一个系统及时感知要在app.vue里面进行一些逻辑的处理：

  beforeUpdate() {
    if (Cookies.get('tokenInfo')) {
      setStorage('userInfo', JSON.stringify(JSON.parse(Cookies.get('tokenInfo')).userInfo))
      setStorage('ents', JSON.stringify(JSON.parse(Cookies.get('tokenInfo')).ents))
    } else if (!Cookies.get('tokenInfo')) {
      // console.log('没有cookies了，说明有一方退出了，这边自动退出')
      removeStorage('ents')
      removeStorage('userInfo')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  },

注意：这些代码要在两个项目里都要写的，在本地测试的时候可能要有点麻烦，把cookie设置的域名改成localhost，并且要同时启两个项目进行测试，测试没问题之后再把域名改成线上一级域名进行打包部署