使用js

需求是这样的：之前用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，并且要同时启两个项目进行测试，测试没问题之后再把域名改成线上一级域名进行打包部署