1. 类似于登录淘宝或者天猫跳转到统一登录页面,登录成功携带参数跳转页面
2. 需求：多个后台管理系统 => 未登录 => 跳转到统一登录界面 => 登录成功携带token => 需要登录系统截取token添加到请求头 => 请求参数展示页面
3. 首先单独开发一个统一登录的功能

<template>
  <div class="login">
      <h1>欢迎来到某某集团后台管理系统</h1>
      <!-- 账号登录 -->
      <div class="loginPwd" v-else-if="show_login===2">
        <el-input placeholder="请输入内容" v-model="inputAccount">
          <template slot="prepend">账号</template>
        </el-input>
        <el-input placeholder="请输入内容" v-model="inputPwd">
          <template slot="prepend">密码</template>
        </el-input>
        <el-button type="primary" @click="loginAccount">登录</el-button>
      </div>
    </section>
  </div>
</template>

<script>
import { loginTf } from "../api/login";
export default {
  name: "Login",
  data() {
    return {
      redirectUrl: "", // 登录成功以后跳转相应系统的页面
      inputAccount: "", // 账号
      inputPwd: "",  // 密码
    };
  },
  created() {
    // redirect是获取哪个系统域名 比如:http://127.0.0.1:8080 方便登录成功以后跳转相应的系统
    if (window.location.href.indexOf("redirect") >= 0) {
      //如果url中包含redirect   split？分割成数组，取第二个
      let redirect = window.location.href.split("?")[1];
      redirect = redirect.substring(9); // 截取字符串第9位开始截取到最后
      this.redirectUrl =redirect
    }
  },
  methods: {
    //    账号登录模式   可添加扫码 手机号码登录
     loginAccount() {
      if (!this.inputPwd && !this.inputAccount) {
        this.$message.error("请输入账号和密码");
      } else if (!this.inputPwd) {
        this.$message.error("请输入密码再登录");
      } else if (!this.inputAccount) {
        this.$message.error("请输入账号再登录");
      } else {
      // 以下请求登录接口，成功返回token 当然需要判断是否符合登录要求，正则来表示，省略
        loginTf({ userName: this.inputAccount, pwd: this.inputPwd })
          .then(res => {
            console.log(res);
            if (res.b === 1) {
              // 获取成功渲染数据 a代表数组 o代表单个数据
              let token = res.o;
              localStorage.setItem("token", token);
             // 登录成功携带token以后跳转相应的系统，相应的系统截取token即可
              window.location.href = this.redirectUrl+'?'+'token='+token
            } else {
             // 没有成功做相应的事情
            }
          })
          .catch(msg => {
            // this.$message({ message: '系统异常', type: 'error', center: true });
          });
      }
  },

};
</script>
<style lang="less" scoped>
  // 登录界面自己样式
</style>

4.首先需要在其全局前置守卫中判断是否有token。

router.beforeEach((to, from, next) => {
    if (window.location.href.indexOf('token') >= 0) {   // 如果token存在
        //如果url中包含token   split？分割成数组，取第二个
        let token = window.location.href.split('?')[1];
        let urlNoToken = window.location.href.split('?')[0]
        token = token.substring(6);  // 截取字符串第6位开始截取指导&出现截取成功
        // 截取成功储存token，下面重定向时会在请求时再获取token添加到头部的
        localStorage.setItem('token', token);
        // 重定向地址去除url当中一大长串的token
        window.location.href= urlNoToken
        next();
    } else {
        if ( localStorage.getItem('token')){
            next();
        }
        if (to.path === '/login') { // 如果是登录页移除token,token过期在请求相应时再判断
            localStorage.removeItem('token');
        }
        if (!localStorage.getItem('token') && to.path !== '/login') {  // 如果token不存在 并且 不是mylogin页面
            next({ path: '/login' });
        } else {
            next();
        }
    }
 
    if (to.meta.title) {
        document.title = to.meta.title;
    }
});

5.第二在其对应的系统首页判断用户是否登录过或者过期

<template>
    <div class="login">
        <section class="title">
            <a href="javascript:void(0)" onclick="location.reload()" class="logo"></a>
            <h1>欢迎来到某某管理系统</h1>
        </section>
        <div @click="loginMe">
            <el-button type="primary"  class="loginLg">你还未登录,请登录</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            };
        },
        created() {
        },
        methods: {
            loginMe(){
                console.log(window.location.href);
                // 如果没有登录，跳转统一登录页面  带上重定向的参数  当然登录有登录自己的状态
                // 先获取当前域名 let myUrl = window.location.href
                window.location.href='统一登录的域名'+'?'+'redirect='+"当前系统的域名myUrl "
            },
        },
    };
</script>
<style lang="less" scoped>
 
</style>