OA对接若依第三方系统时实现单点登录的一些笔记

业务需求：

在oa系统里面左侧的菜单栏目里，都是oa自己的，现在需要实现左侧多一个菜单按钮，点击之后直接跳到另一个系统的一个页面（这里使用若依），用户的体验如同在同一个系统一样，并不了解是多个系统对接的。而在其中需要实现单点登录的功能，也就是用户在oa系统登录之后，跳转到第三方系统的页面时并不需要重复的登录。

本文使用的第三方系统是若依前后端分离版

前端

首先新起一个登录的Vue页面，新增login_sso.vue

在/src/view/下新增login_sso.vue文件作为自动登录的前端入口

<template>
  <div></div>
</template>


<script>

import {
     getInfo} from "@/api/login";

export default {
     
  name: "LoginSso",
  data() {
     
    return {
     
      loginRules: {
     },
      loading: false,
      //验证码开关
      captchaOnOff: true,
      //注册开关
      register: false,
      //重定向
      redirect: undefined,
      userInfo:{
     
        userName:"",
        password:""
      }
    };
  },
  watch: {
     
  },
  created() {
     
    //页面初始化时调单点登录方法
    this.loginSso();
  },
  mounted(){
     



  },
  methods: {
     
    loginSso(){
     
      console.log("获取")
      //获取地址栏中的用户名和密码  这里使用了地址传参，需要在oa系统那里自己配置
      this.userInfo.userName = this.$route.query.userName;
      this.userInfo.password = this.$route.query.password;
      console.log("名字是"+this.userInfo.userName)
      console.log("密码是"+this.userInfo.password)

      //调用登录的接口
      if(this.userInfo.userName==''||this.userInfo.userName==undefined||this.userInfo.userName==null){
     
        //请求中不带名字，拦截为正常登录
      }else{
     
        this.loading = true;//开启过渡动画
        console.log("开启过渡动画")
        const loginInfo = {
     
          "userName" : this.userInfo.userName,
          "password" : this.userInfo.password
        };

        //执行另一套登录操作
        //不是本系统的用户,去J平台登陆去
        this.$store.dispatch("LoginSso", loginInfo).then(() => {
     
          this.$message.success("登录成功");
          this.loading = false;

          //   //处理登录        下面的path根据自己的需要去写
            this.$router.push({
     path: '/cggl/index'}).catch(() => {