使用码云 Gitee 登录 Ruoyi-Vue-Pro 配置指南

redirect-uri: http://127.0.0.1/social-login/10 必须与创建应用时填写的配置的一样，源码中是没有配置的，会提示没有正确配置回调地址，郁闷了好久

4）前台配置新增登录配置

yudao-ui-admin-vue2\src\utils\constants.js 中新增码云登录，界面会新增一个可以点击登录的图标。

export const SystemUserSocialTypeEnum = {
  DINGTALK: { title: "钉钉", type: 20, source: "dingtalk", img: "https://s1.ax1x.com/2022/05/22/OzMDRs.png", },
  GITEE: { title: "码云", type: 10, source: "gitee", img: "https://gitee.com/static/images/logo-black.svg", },
  WECHAT_ENTERPRISE: { title: "企业微信", type: 30, source: "wechat_enterprise", img: "https://s1.ax1x.com/2022/05/22/OzMrzn.png", }
}

5）修改登录页面中的 doSocialLogin 方法

yudao-ui-admin-vue2\src\views\login.vue 中找到函数 doSocialLogin，将 redirect 参数丢掉，因为这个参数会变，而 Gitee 中配置的回调地址不可变，如果两者不同回报错。

async doSocialLogin(socialTypeEnum) {
  // 设置登录中
  this.loading = true;
  let tenant = false;
  if (this.tenantEnable) {
    await this.$prompt('请输入租户名称', "提示", { confirmButtonText: "确定", cancelButtonText: "取消" }).then(async ({value}) => {
      await getTenantIdByName(value).then(res => {
        const tenantId = res.data;
        tenant = true
        if (tenantId && tenantId >= 0) {
          setTenantId(tenantId)
        }
      });
    }).catch(() => {
      // 取消登录按钮 loading 状态
      this.loading = false;
      return false
    })
  } else {
    tenant = true
  }
  if(tenant){
    // 计算 redirectUri
    const redirectUri = location.origin + '/social-login?' + encodeURIComponent('type=' + socialTypeEnum.type );
    //+ '&redirect=' + (this.redirect || "/")); // 重定向不能丢
    // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
    // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
    // 进行跳转
    // socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => {
    socialAuthRedirect(socialTypeEnum.type).then((res) => {
      // console.log(res.url);
      window.location.href = res.data;
    });
  }
},

查看地址，发现就是这个 redirect 的问题。

6）后台 Java 相关的调用都去掉 redirect 参数

ruoyi-vue-pro\yudao-module-system\yudao-module-system-biz\src\main\java\cn\iocoder\yudao\module\system\controller\admin\auth\AuthController.java 从这个类开始改，全部改掉就 ok 了，这里注意一下：

ruoyi-vue-pro\yudao-module-system\yudao-module-system-biz\src\main\java\cn\iocoder\yudao\module\system\service\social\SocialClientServiceImpl.java

 public String getAuthorizeUrl(Integer socialType, Integer userType) {
   // 获得对应的 AuthRequest 实现
   AuthRequest authRequest = buildAuthRequest(socialType, userType);
   // 生成跳转地址
   String authorizeUri = authRequest.authorize(AuthStateUtils.createState());
   // return HttpUtils.replaceUrlQuery(authorizeUri, "redirect_uri", redirectUri);
   return authorizeUri;
 }

7）修改 social-login 路由及白名单

E:\yudao\yudao-ui-admin-vue2\src\router\index.js 代码如下：

 { path: '/social-login/:type(\\d+)', component: (resolve) => require(['@/views/socialLogin'], resolve), hidden: true },

修改 yudao-ui-admin-vue2\src\views\socialLogin.vue，两处做替换

// this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
this.$router.push({ path: "/index" }).catch(()=>{});

修改路由拦截 yudao-ui-admin-vue2\src\permission.js 中找到 whiteList 后加入/social-login/ 的处理

// 没有 token
if (whiteList.indexOf(to.path) !== -1) {
  // 在免登录白名单，直接进入
  next()
} else if (to.path.indexOf('/social-login/') !== -1) {
  // 在免登录白名单，直接进入
  next()
} else {
  const redirect = encodeURIComponent(to.fullPath)
  // 编码 URI，保证参数跳转回去后，可以继续带上
  next(`/login?redirect=${redirect}`)
  // 否则全部重定向到登录页
  NProgress.done()
}

5、在应用中使用码云授权登录

在登录页点击【码云图标】会提示输入租户名称，点击提交后会跳转进行登录。

首次登录会提示绑定系统中已有的账号，如下，输入后登录，以后登录就会自动跳转了。