功能：cookie与vue：完成双系统切换（jQuery老系统与vue新系统切换）

一、需求说明

1、A系统与B系统切换跳转，两个系统框架不同。
2、需求1：实现从A系统切换到B系统时，关闭A系统所有页面，跳转B系统链接首页，反过来同理。
3、需求2：点击系统切换按钮时，弹出提示，若取消系统切换，系统切换按钮应还原为本系统。
4、需求3：若从A系统退出登录时，再次登录的话，进入的是A系统首页，反过来同理。
5、项目框架：A系统jQuery框架，B系统vue框架。

二、功能实现

1、系统切换按钮：

A、B系统都要有

// 按钮页面.vue

<el-select size="small" @change="systemChange" v-model="systemId">
   <el-option :key="index" label="A系统" value="1" />
   <el-option :key="index" label="B系统" value="2" />
 </el-select>

2、按钮点击，系统切换跳转事件：

A、B系统都要有
下拉选择：弹出提示警告
【确定】：更新cookie当前系统id、跳转对应系统链接
【取消】：下拉码表还原为当前系统id

// 按钮页面.vue

import { setSystem } from 'system.js' // 引入cookie设置

systemChange() {
  this.$confirm(`切换系统后，您当前打开的功能将全部关闭`, '提示', {
    type: 'warning',
  }).then((rs) => { // 【确定】切换系统
    setSystem(this.systemId) // cookie更新为要跳转的系统id
    if (this.systemId === '2') { // 根据下拉值选择跳转链接
      window.location.href = 'B页面首页地址链接'
    } else {
      window.location.href = 'A页面首页地址链接'
    }
  }, () => { // 【取消】切换系统
    this.systemId = this.oldSystemId // 将下拉值还原为目前系统id
  }).catch(res => {})
},

3、cookie记住当前系统id：目的：下次登录时跳转我当前退出去的系统

// system.js

import VueCookie from 'vue-cookie' // 引入vue的cookie

export const SYSTEM = 'System' // 系统cookie名称

export function getSystem() { // 获取cookie
  return VueCookie.get(SYSTEM)
}

export function setSystem(system) { // 设置系统cookie值
  return VueCookie.set(SYSTEM, system)
}

export function removeSystem() { // 移除系统cookie
  return VueCookie.remove(SYSTEM)
}

4、登录：登录上次退出的系统

// login.vue/js

import { getSystem, setSystem } from 'system.js' // 引入cookie设置

const systemId = getSystem()
if (systemId === '2') {
  window.location.href = 'B页面首页地址链接'
} else {
  if (!systemId) setSystem('1') // 如果没有获取到名为System的cookie值，则默认跳转A系统，并设置cookie值为'1'
  window.location.href = 'A页面首页地址链接'
}

三、踩坑记录

1、cookie设置一直出现重复cookie，导致cookie值一直存储报错，导致再次登录系统时，跳转链接不对。
2、重复原因：第一个cookie是A系统设置，没有path；第二个cookie是B系统设置，唯一区别是有一个path。
3、Cookie属性：名称、值、域（domain）、路径（path）。不同的域、不同的路径下可以存在同样名字的cookie。
4、所以AB系统要设置同一个cookie，就需要名称、domain、path相同，值不同，才能完成cookie的更新，否则就会新增加一个cookie。

《功能：cookie与vue：完成双系统切换（jQuery老系统与vue新系统切换）》jQuery系统的cookie设置才是要了老命哇~