!23 统一登录，授权 Merge pull request !23 from 三个三/auth

疯狂的狮子Li

2023-07-02 4cf836055a02ed2dfd6fa4fd543366a7c2e06608

!23 统一登录，授权
Merge pull request !23 from 三个三/auth

 src/api/login.ts

@@ -2,6 +2,7 @@
import { AxiosPromise } from 'axios';
import { LoginData, LoginResult, VerifyCodeResult, TenantInfo } from './types';
import { UserInfo } from '@/api/system/user/types';
import { da } from 'element-plus/es/locale';

/**
 * @param data {LoginData}
@@ -9,13 +10,9 @@
 */
export function login(data: LoginData): AxiosPromise<LoginResult> {
  const params = {
    tenantId: data.tenantId,
    username: data.username.trim(),
    password: data.password,
    code: data.code,
    uuid: data.uuid,
    clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
    grantType: 'password'
    ...data,
    clientId: data.clientId || 'e5cd7e4891bf95d1d19206ce24a7b32e',
    grantType: data.grantType || 'password'
  };
  return request({
    url: '/auth/login',
@@ -66,16 +63,16 @@
 * 第三方登录
 * @param source 第三方登录类型
 * */
export function socialLogin(source: string, code: any, state: any): AxiosPromise<any> {
  const data = {
    code,
    state,
    source
export function callback(data: LoginData): AxiosPromise<any> {
  const LoginData = {
    ...data,
    clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
    grantType: 'social'
  };
  return request({
    url: '/auth/social-login',
    method: 'get',
    params: data
    url: '/auth/social/callback',
    method: 'post',
    data: LoginData
  });
}


 src/api/types.ts

@@ -15,10 +15,13 @@
 * 登录请求
 */
export interface LoginData {
  tenantId: string;
  username: string;
  password: string;
  tenantId?: string;
  username?: string;
  password?: string;
  rememberMe?: boolean;
  socialCode?: string,
  socialState?: string,
  source?: string,
  code?: string;
  uuid?: string;
  clientId: string;

 src/layout/components/SocialLogin/index.vue

@@ -3,34 +3,80 @@
</template>

<script setup lang="ts">
import {socialLogin} from '@/api/login';
import {setToken} from '@/utils/auth';
import { login, callback } from '@/api/login';
import { setToken } from '@/utils/auth';
import Cookies from 'js-cookie';
import { getToken } from '@/utils/auth';
import { LoginData } from '@/api/types';

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


/**
 * 接收Route传递的参数
 * @param {Object} route.query.
 */
const code = route.query.code;
const state = route.query.state;
const code = route.query.code as string;
const state = route.query.state as string;
const source = route.query.source as string;
const loading = ref(true);
await socialLogin(source, code, state)
  .then(async (res) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
      return;
    }
const tenantId = Cookies.get("tenantId") ? Cookies.get("tenantId") as string : '000000';


const processResponse = async (res: any) => {
  if (res.code !== 200) {
    throw new Error(res.msg);
  }
  setToken(res.data.access_token);
  ElMessage.success(res.msg);
  location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
};

const handleError = (error: any) => {
  ElMessage.error(error.message);
  location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
};

const callbackByCode = async (data: LoginData) => {
  try {
    const res = await callback(data);
    await processResponse(res);
    loading.value = false;
    setToken(res.msg);
    ElMessage.success('登录成功');
    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
  })
  .catch(() => {
  } catch (error) {
    handleError(error);
  }
};

const loginByCode = async (data: LoginData) => {
  try {
    const res = await login(data);
    await processResponse(res);
    loading.value = false;
  } catch (error) {
    handleError(error);
  }
};

const init = async () => {
  const data: LoginData = {
    socialCode: code,
    socialState: state,
    tenantId: tenantId,
    source: source,
    clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
    grantType: 'social'
  };

  if (!getToken()) {
    await loginByCode(data);
  } else {
    await callbackByCode(data);
  }
};

onMounted(() => {
  nextTick(() => {
    init();
  });
});
</script>

 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
@@ -185,7 +194,7 @@
  authBinding(type).then((res: any) => {
    if (res.code === 200) {
      window.location.href = res.msg;
  } else {
    } else {
      ElMessage.error(res.msg);
    }
  });