若依ruoyi框架实现单点登录或者接入统一认证

若依框架单点登录改造实践

原创

于 2023-08-30 09:18:02 发布 · 1.9w 阅读

99 ·

CC 4.0 BY-SA版权

文章标签：

#java #Vue #ruoyi #若依 #统一认证平台 #单点登录

本文围绕若依框架接入上级应用统一认证（单点登录）展开。阐述了改造目的是取消验证码实现自动登录，介绍了前端改造步骤，如新增login_sso.vue、注册路由等，以及后端改造步骤，包括引入依赖、新增控制器等，最终可通过浏览器GET请求实现。

1、业务场景

若依的自带的登录功能是成熟的，但是如果要接入上级应用的统一认证（单点登录）的话，还是需要改造一下，改造的主要目的是取消验证码可以自动登录，实现的思想网上有很多都一样，本文讲一下实践（可以测试通过的那种）,最终浏览器输入GET请求就可以实现.

2、前端改造

2.1、新增login_sso.vue

在/src/view/下新增login_sso.vue文件作为自动登录的前端入口.- 如果你参考别的示例，可能第一步就卡住了，因为你的若依版本很有可能在/src/view/目录下不支持驼峰命名.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
    };
  },
  watch: {
  },
  created() {
    //页面初始化时调单点登录方法
    this.loginSso();
  },
  methods: {
    loginSso(){
      //获取地址栏中的code
      const code = this.$route.query.code;
      console.log("code="+code)
      //调用登录的接口
      if(code==''||code==undefined||code==null){
        //请求中不带code，拦截为正常登录
      }else{
        this.loading = true;//开启过渡动画
        const loginInfo = {
          "code" : code
        };

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