前端实现切换租户选择第三方授权登录，和优化第三方页面登录注册

thiszhc

2023-07-01 2b7ffdf19c0e525f03dc6234b58cac03b627f0a5

前端实现切换租户选择第三方授权登录，和优化第三方页面登录注册

 src/api/login.ts

@@ -66,11 +66,15 @@
 * 第三方登录
 * @param source 第三方登录类型
 * */
export function socialLogin(source: string, code: any, state: any): AxiosPromise<any> {
export function socialLogin(source: string, tenantId: string, loginType: string, code: any, state: any): AxiosPromise<any> {
  const data = {
    code,
    state,
    source
    source,
    tenantId,
    loginType,
    clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
    grantType: 'social'
  };
  return request({
    url: '/auth/social-login',

 src/layout/components/SocialLogin/index.vue

@@ -5,9 +5,12 @@
<script setup lang="ts">
import {socialLogin} from '@/api/login';
import {setToken} from '@/utils/auth';
import Cookies from 'js-cookie';
import { getToken } from '@/utils/auth';
import router from '@/router';

const route = useRoute();
const router = useRouter();
const loading = ref(true);


/**
@@ -17,8 +20,16 @@
const code = route.query.code;
const state = route.query.state;
const source = route.query.source as string;
const loading = ref(true);
await socialLogin(source, code, state)
const tenantId = Cookies.get("tenantId") ? Cookies.get("tenantId") as string : '000000';
const loginType = getToken() ? 'register' : 'login';

/**
 * 通过code获取token
 * @param {string} source
 * @param {string} code
 * @param {string} state
 */
await socialLogin(source, tenantId, loginType, code, state)
  .then(async (res) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
@@ -26,9 +37,10 @@
      return;
    }
    loading.value = false;
    setToken(res.msg);
    ElMessage.success('登录成功');
    // setToken(res.msg);
    loginType === 'login' ? setToken(res.data) : ElMessage.success(res.msg);
    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';

  })
  .catch(() => {
    loading.value = false;

 src/router/index.ts

@@ -181,4 +181,5 @@
  }
});


export default router;

 src/views/login.vue

@@ -4,7 +4,8 @@
      <h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
      <el-form-item prop="tenantId" v-if="tenantEnabled">
        <el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName"
            :value="item.tenantId"></el-option>
          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
        </el-select>
      </el-form-item>
@@ -14,12 +15,14 @@
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
          @keyup.enter="handleLogin">
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
        <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
          @keyup.enter="handleLogin">
          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
        </el-input>
        <div class="login-code">
@@ -177,6 +180,12 @@
    }
  }
}

//检测租户选择框的变化
watch(() => loginForm.value.tenantId, (val: string) => {
  Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 })
});

/**
 * 第三方登录
 * @param type