!20 统一登录授权 * 统一授权登录 * 对接后端更改做了适配， * 前端实现切换租户选择第三方授权登录，和优化第三方页面登录注册

三个三

2023-07-02 a8f575fe6f4440ca62bb2ad850bbc0baf77ded5d

!20 统一登录授权
* 统一授权登录
* 对接后端更改做了适配，
* 前端实现切换租户选择第三方授权登录，和优化第三方页面登录注册

 .env.development

@@ -13,7 +13,7 @@
# ç›‘控地址
VITE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'

# xxl-job æŽ§åˆ¶å°åœ°å€
VITE_APP_XXL_JOB_ADMIN = 'http://localhost:9100/xxl-job-admin'
# powerjob æŽ§åˆ¶å°åœ°å€
VITE_APP_POWERJOB_ADMIN = 'http://localhost:7700/'

VITE_APP_PORT = 80

 .env.production

@@ -10,8 +10,8 @@
# ç›‘控地址
VITE_APP_MONITRO_ADMIN = '/admin/applications'

# ç›‘控地址
VITE_APP_XXL_JOB_ADMIN = '/xxl-job-admin'
# powerjob æŽ§åˆ¶å°åœ°å€
VITE_APP_POWERJOB_ADMIN = '/powerjob'

# ç”Ÿäº§çŽ¯å¢ƒ
VITE_APP_BASE_API = '/prod-api'

 .gitignore

@@ -1,4 +1,5 @@
.DS_Store
.history
node_modules/
dist/
npm-debug.log*

 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,11 +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
    ...data,
    clientId: data.clientId || 'e5cd7e4891bf95d1d19206ce24a7b32e',
    grantType: data.grantType || 'password'
  };
  return request({
    url: '/auth/login',
@@ -60,6 +59,22 @@
    timeout: 20000
  });
}
/**
 * ç¬¬ä¸‰æ–¹ç™»å½•
 * @param source ç¬¬ä¸‰æ–¹ç™»å½•ç±»åž‹
 * */
export function callback(data: LoginData): AxiosPromise<any> {
  const LoginData = {
    ...data,
    clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
    grantType: 'social'
  };
  return request({
    url: '/auth/social/callback',
    method: 'post',
    data: LoginData
  });
}

// èŽ·å–用户详细信息
export function getInfo(): AxiosPromise<UserInfo> {

 src/api/system/client/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,80 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { ClientVO, ClientForm, ClientQuery } from '@/api/system/client/types';

/**
 * æŸ¥è¯¢å®¢æˆ·ç«¯ç®¡ç†åˆ—表
 * @param query
 * @returns {*}
 */

export const listClient = (query?: ClientQuery): AxiosPromise<ClientVO[]> => {
  return request({
    url: '/system/client/list',
    method: 'get',
    params: query
  });
};

/**
 * æŸ¥è¯¢å®¢æˆ·ç«¯ç®¡ç†è¯¦ç»†
 * @param id
 */
export const getClient = (id: string | number): AxiosPromise<ClientVO> => {
  return request({
    url: '/system/client/' + id,
    method: 'get'
  });
};

/**
 * æ–°å¢žå®¢æˆ·ç«¯ç®¡ç†
 * @param data
 */
export const addClient = (data: ClientForm) => {
  return request({
    url: '/system/client',
    method: 'post',
    data: data
  });
};

/**
 * ä¿®æ”¹å®¢æˆ·ç«¯ç®¡ç†
 * @param data
 */
export const updateClient = (data: ClientForm) => {
  return request({
    url: '/system/client',
    method: 'put',
    data: data
  });
};

/**
 * åˆ é™¤å®¢æˆ·ç«¯ç®¡ç†
 * @param id
 */
export const delClient = (id: string | number | Array<string | number>) => {
  return request({
    url: '/system/client/' + id,
    method: 'delete'
  });
};

/**
 * çŠ¶æ€ä¿®æ”¹
 * @param id ID
 * @param status çŠ¶æ€
 */
export function changeStatus(id: number | string, status: string) {
  const data = {
    id,
    status
  };
  return request({
    url: '/system/client/changeStatus',
    method: 'put',
    data: data
  });
}

 src/api/system/client/types.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,138 @@
export interface ClientVO {
  /**
   * id
   */
  id: string | number;

  /**
   * å®¢æˆ·ç«¯id
   */
  clientId: string | number;

  /**
   * å®¢æˆ·ç«¯key
   */
  clientKey: string;

  /**
   * å®¢æˆ·ç«¯ç§˜é’¥
   */
  clientSecret: string;

  /**
   * æŽˆæƒç±»åž‹
   */
  grantTypeList: string[];

  /**
   * è®¾å¤‡ç±»åž‹
   */
  deviceType: string;

  /**
   * token活跃超时时间
   */
  activeTimeout: number;

  /**
   * token固定超时
   */
  timeout: number;

  /**
   * çŠ¶æ€ï¼ˆ0正常 1停用）
   */
  status: string;

}

export interface ClientForm extends BaseEntity {
  /**
   * id
   */
  id?: string | number;

  /**
   * å®¢æˆ·ç«¯id
   */
  clientId?: string | number;

  /**
   * å®¢æˆ·ç«¯key
   */
  clientKey?: string;

  /**
   * å®¢æˆ·ç«¯ç§˜é’¥
   */
  clientSecret?: string;

  /**
   * æŽˆæƒç±»åž‹
   */
  grantTypeList?: string[];

  /**
   * è®¾å¤‡ç±»åž‹
   */
  deviceType?: string;

  /**
   * token活跃超时时间
   */
  activeTimeout?: number;

  /**
   * token固定超时
   */
  timeout?: number;

  /**
   * çŠ¶æ€ï¼ˆ0正常 1停用）
   */
  status?: string;

}

export interface ClientQuery extends PageQuery {
  /**
   * å®¢æˆ·ç«¯id
   */
  clientId?: string | number;

  /**
   * å®¢æˆ·ç«¯key
   */
  clientKey?: string;

  /**
   * å®¢æˆ·ç«¯ç§˜é’¥
   */
  clientSecret?: string;

  /**
   * æŽˆæƒç±»åž‹
   */
  grantType?: string;

  /**
   * è®¾å¤‡ç±»åž‹
   */
  deviceType?: string;

  /**
   * token活跃超时时间
   */
  activeTimeout?: number;

  /**
   * token固定超时
   */
  timeout?: number;

  /**
   * çŠ¶æ€ï¼ˆ0正常 1停用）
   */
  status?: string;

}

 src/api/system/social/auth.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,24 @@
import request from '@/utils/request';

// ç»‘定账号
export function authBinding(source: string) {
  return request({
    url: '/auth/binding/' + source,
    method: 'get'
  });
}

// è§£ç»‘账号
export function authUnlock(authId: string) {
  return request({
    url: '/auth/unlock/' + authId,
    method: 'delete'
  });
}
//获取授权列表
export function getAuthList() {
  return request({
    url: '/system/social/list',
    method: 'get'
  });
}

 src/api/types.ts

@@ -15,19 +15,24 @@
 * ç™»å½•è¯·æ±‚
 */
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;
  grantType: string;
}

/**
 * ç™»å½•å“åº”
 */
export interface LoginResult {
  token: string;
  access_token: string;
}

/**

 src/assets/icons/svg/gitee.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686919908144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 992C246.895625 992 32 777.104375 32 512S246.895625 32 512 32s480 214.895625 480 480-214.895625 480-480 480z m242.9521875-533.3278125h-272.56875a23.7121875 23.7121875 0 0 0-23.71125 23.7121875l-0.024375 59.255625c0 13.08 10.6078125 23.7121875 23.6878125 23.7121875h165.96c13.104375 0 23.7121875 10.6078125 23.7121875 23.6878125v11.855625a71.1121875 71.1121875 0 0 1-71.1121875 71.1121875h-225.215625a23.7121875 23.7121875 0 0 1-23.6878125-23.7121875V423.1278125a71.1121875 71.1121875 0 0 1 71.0878125-71.1121875h331.824375a23.7121875 23.7121875 0 0 0 23.6878125-23.71125l0.0721875-59.2565625a23.7121875 23.7121875 0 0 0-23.68875-23.7121875H423.08a177.76875 177.76875 0 0 0-177.76875 177.7921875V754.953125c0 13.1034375 10.60875 23.7121875 23.713125 23.7121875h349.63125a159.984375 159.984375 0 0 0 159.984375-159.984375V482.36a23.7121875 23.7121875 0 0 0-23.7121875-23.6878125z" fill="#515151" p-id="2522"></path></svg>

 src/layout/components/SocialLogin/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<template>
  <div v-loading="loading" class="social-login"></div>
</template>

<script setup lang="ts">
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 loading = ref(true);


/**
 * æŽ¥æ”¶Route传递的参数
 * @param {Object} route.query.
 */
const code = route.query.code as string;
const state = route.query.state as string;
const source = route.query.source as string;
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;
  } 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/permission.ts

@@ -10,7 +10,7 @@
import usePermissionStore from '@/store/modules/permission';

NProgress.configure({ showSpinner: false });
const whiteList = ['/login', '/register'];
const whiteList = ['/login', '/register', '/social-login'];

router.beforeEach(async (to, from, next) => {
  NProgress.start();

 src/router/index.ts

@@ -38,6 +38,11 @@
    ]
  },
  {
    path: '/social-login',
    hidden: true,
    component: () => import('@/layout/components/SocialLogin/index.vue')
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
@@ -176,4 +181,5 @@
  }
});


export default router;

 src/store/modules/user.ts

@@ -23,8 +23,8 @@
    const [err, res] = await to(loginApi(userInfo));
    if (res) {
      const data = res.data;
      setToken(data.token);
      token.value = data.token;
      setToken(data.access_token);
      token.value = data.access_token;
      return Promise.resolve();
    }
    return Promise.reject(err);

 src/types/env.d.ts

@@ -65,7 +65,7 @@
  VITE_APP_BASE_URL: string;
  VITE_APP_CONTEXT_PATH: string;
  VITE_APP_MONITRO_ADMIN: string;
  VITE_APP_XXL_JOB_ADMIN: string;
  VITE_APP_POWERJOB_ADMIN: string;
  VITE_APP_ENV: string;
}
interface ImportMeta {

 src/utils/auth.ts

@@ -4,6 +4,6 @@

export const getToken = () => tokenStorage.value;

export const setToken = (token: string) => (tokenStorage.value = token);
export const setToken = (access_token: string) => (tokenStorage.value = access_token);

export const removeToken = () => (tokenStorage.value = null);

 src/views/index.vue

@@ -21,7 +21,7 @@
          * åˆ†å¸ƒå¼é” Lock4j æ³¨è§£é”ã€å·¥å…·é” å¤šç§å¤šæ ·<br />
          * åˆ†å¸ƒå¼å¹‚ç­‰ Lock4j åŸºäºŽåˆ†å¸ƒå¼é”å®žçŽ°<br />
          * åˆ†å¸ƒå¼é“¾è·¯è¿½è¸ª SkyWalking æ”¯æŒé“¾è·¯è¿½è¸ªã€ç½‘格分析、度量聚合、可视化<br />
          * åˆ†å¸ƒå¼ä»»åŠ¡è°ƒåº¦ Xxl-Job é«˜æ€§èƒ½ é«˜å¯é  æ˜“扩展<br />
          * åˆ†å¸ƒå¼ä»»åŠ¡è°ƒåº¦ PowerJob é«˜æ€§èƒ½ é«˜å¯é  æ˜“扩展<br />
          * æ–‡ä»¶å­˜å‚¨ Minio æœ¬åœ°å­˜å‚¨<br />
          * æ–‡ä»¶å­˜å‚¨ ä¸ƒç‰›ã€é˜¿é‡Œã€è…¾è®¯ äº‘存储<br />
          * ç›‘控框架 SpringBoot-Admin å…¨æ–¹ä½æœåŠ¡ç›‘控<br />

 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">
@@ -36,6 +39,20 @@
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
      <div style="display: flex;justify-content: flex-end;flex-direction: row;">
        <el-button circle>
          <svg-icon icon-class="qq" @click="doSocialLogin('qq')" />
        </el-button>
        <el-button circle>
          <svg-icon icon-class="wechat" @click="doSocialLogin('wechat')" />
        </el-button>
        <el-button circle>
          <svg-icon icon-class="gitee" @click="doSocialLogin('gitee')" />
        </el-button>
        <el-button circle>
          <svg-icon icon-class="github" @click="doSocialLogin('github')" />
        </el-button>
      </div>
    </el-form>
    <!--  åº•éƒ¨  -->
    <div class="el-login-footer">
@@ -46,30 +63,31 @@

<script setup lang="ts">
import { getCodeImg, getTenantList } from '@/api/login';
import { authBinding } from '@/api/system/social/auth';
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { useUserStore } from '@/store/modules/user';
import { LoginData, TenantVO } from '@/api/types';
import { FormRules } from 'element-plus';
import { ElForm, FormRules } from 'element-plus';
import { to } from 'await-to-js';

const userStore = useUserStore();
const router = useRouter();

const loginForm = ref<LoginData>({
    tenantId: "000000",
    username: 'admin',
    password: 'admin123',
    rememberMe: false,
    code: '',
    uuid: ''
  tenantId: "000000",
  username: 'admin',
  password: 'admin123',
  rememberMe: false,
  code: '',
  uuid: ''
});

const loginRules: FormRules = {
    tenantId: [{ required: true, trigger: "blur", message: "请输入您的租户编号" }],
    username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
    code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
  tenantId: [{ required: true, trigger: "blur", message: "请输入您的租户编号" }],
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
};

const codeUrl = ref('');
@@ -88,64 +106,64 @@
const tenantList = ref<TenantVO[]>([]);

const handleLogin = () => {
    loginRef.value.validate(async (valid:boolean, fields: any) => {
        if (valid) {
            loading.value = true;
            // å‹¾é€‰äº†éœ€è¦è®°ä½å¯†ç è®¾ç½®åœ¨ cookie ä¸­è®¾ç½®è®°ä½ç”¨æˆ·åå’Œå¯†ç 
            if (loginForm.value.rememberMe) {
                Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 });
                Cookies.set('username', loginForm.value.username, { expires: 30 });
                Cookies.set('password', String(encrypt(loginForm.value.password)), { expires: 30 });
                Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 });
            } else {
                // å¦åˆ™ç§»é™¤
                Cookies.remove("tenantId");
                Cookies.remove('username');
                Cookies.remove('password');
                Cookies.remove('rememberMe');
            }
            // è°ƒç”¨action的登录方法
            // prittier-ignore
            const [err] = await to(userStore.login(loginForm.value));
            if (!err) {
                await router.push({ path: redirect.value || '/' });
            } else {
                loading.value = false;
                // é‡æ–°èŽ·å–验证码
                if (captchaEnabled.value) {
                    await getCode();
                }
            }
        } else {
            console.log('error submit!', fields);
  loginRef.value.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      loading.value = true;
      // å‹¾é€‰äº†éœ€è¦è®°ä½å¯†ç è®¾ç½®åœ¨ cookie ä¸­è®¾ç½®è®°ä½ç”¨æˆ·åå’Œå¯†ç 
      if (loginForm.value.rememberMe) {
        Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 });
        Cookies.set('username', loginForm.value.username, { expires: 30 });
        Cookies.set('password', String(encrypt(loginForm.value.password)), { expires: 30 });
        Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 });
      } else {
        // å¦åˆ™ç§»é™¤
        Cookies.remove("tenantId");
        Cookies.remove('username');
        Cookies.remove('password');
        Cookies.remove('rememberMe');
      }
      // è°ƒç”¨action的登录方法
      // prittier-ignore
      const [err] = await to(userStore.login(loginForm.value));
      if (!err) {
        await router.push({ path: redirect.value || '/' });
      } else {
        loading.value = false;
        // é‡æ–°èŽ·å–验证码
        if (captchaEnabled.value) {
          await getCode();
        }
    });
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

/**
 * èŽ·å–验证码
 */
const getCode = async () => {
    const res = await getCodeImg();
    const { data } = res;
    captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
    if (captchaEnabled.value) {
        codeUrl.value = 'data:image/gif;base64,' + data.img;
        loginForm.value.uuid = data.uuid;
    }
  const res = await getCodeImg();
  const { data } = res;
  captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
  if (captchaEnabled.value) {
    codeUrl.value = 'data:image/gif;base64,' + data.img;
    loginForm.value.uuid = data.uuid;
  }
};

const getCookie = () => {
    const tenantId = Cookies.get("tenantId");
    const username = Cookies.get('username');
    const password = Cookies.get('password');
    const rememberMe = Cookies.get('rememberMe');
    loginForm.value = {
        tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId,
        username: username === undefined ? loginForm.value.username : username,
        password: password === undefined ? loginForm.value.password : (decrypt(password) as string),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
    };
  const tenantId = Cookies.get("tenantId");
  const username = Cookies.get('username');
  const password = Cookies.get('password');
  const rememberMe = Cookies.get('rememberMe');
  loginForm.value = {
    tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId,
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : (decrypt(password) as string),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  };
}


@@ -153,20 +171,41 @@
 * èŽ·å–租户列表
 */
const initTenantList = async () => {
    const { data } = await getTenantList();
    tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
    if (tenantEnabled.value) {
        tenantList.value = data.voList;
        if (tenantList.value != null && tenantList.value.length !== 0) {
            loginForm.value.tenantId = tenantList.value[0].tenantId;
        }
  const { data } = await getTenantList();
  tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
  if (tenantEnabled.value) {
    tenantList.value = data.voList;
    if (tenantList.value != null && tenantList.value.length !== 0) {
      loginForm.value.tenantId = tenantList.value[0].tenantId;
    }
  }
}

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

/**
 * ç¬¬ä¸‰æ–¹ç™»å½•
 * @param type
 */
const doSocialLogin = (type: string) => {
  authBinding(type).then((res: any) => {
    if (res.code === 200) {
      window.location.href = res.msg;
    } else {
      ElMessage.error(res.msg);
    }
  });
};



onMounted(() => {
    getCode();
    initTenantList();
    getCookie();
  getCode();
  initTenantList();
  getCookie();
});
</script>

@@ -179,6 +218,7 @@
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
@@ -190,32 +230,39 @@
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
@@ -224,10 +271,11 @@
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial,serif;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;

 src/views/monitor/powerjob/index.vue

ÎļþÃû´Ó src/views/monitor/xxljob/index.vue ÐÞ¸Ä
@@ -5,5 +5,5 @@
</template>

<script setup lang="ts">
const url = ref(import.meta.env.VITE_APP_XXL_JOB_ADMIN);
const url = ref(import.meta.env.VITE_APP_POWERJOB_ADMIN);
</script>

 src/views/system/client/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,344 @@
<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
          <el-form-item label="客户端key" prop="clientKey">
            <el-input v-model="queryParams.clientKey" placeholder="请输入客户端key" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="客户端秘钥" prop="clientSecret">
            <el-input v-model="queryParams.clientSecret" placeholder="请输入客户端秘钥" clearable @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="状态" clearable>
              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:client:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:client:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:client:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:client:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="clientList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" v-if="true" />
        <el-table-column label="客户端id" align="center" prop="clientId" />
        <el-table-column label="客户端key" align="center" prop="clientKey" />
        <el-table-column label="客户端秘钥" align="center" prop="clientSecret" />
        <el-table-column label="授权类型" align="center">
          <template #default="scope">
            <div>
              <template v-for="type in scope.row.grantTypeList">
                <dict-tag class="el-check-tag" :options="sys_grant_type" :value="type" />
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="设备类型" align="center">
          <template #default="scope">
            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
          </template>
        </el-table-column>
        <el-table-column label="Token活跃超时时间" align="center" prop="activeTimeout" />
        <el-table-column label="Token固定超时时间" align="center" prop="timeout" />
        <el-table-column label="状态" align="center" key="status">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:client:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:client:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-card>
    <!-- æ·»åŠ æˆ–修改客户端管理对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="clientFormRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="客户端key" prop="clientKey">
          <el-input v-model="form.clientKey" :disabled="form.id != null" placeholder="请输入客户端key" />
        </el-form-item>
        <el-form-item label="客户端秘钥" prop="clientSecret">
          <el-input v-model="form.clientSecret" :disabled="form.id != null" placeholder="请输入客户端秘钥" />
        </el-form-item>
        <el-form-item label="授权类型" prop="grantTypeList">
          <el-select v-model="form.grantTypeList" multiple placeholder="请输入授权类型">
            <el-option
              v-for="dict in sys_grant_type"
              :key="dict.value" :label="dict.label" :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="form.deviceType" placeholder="请输入设备类型">
            <el-option
              v-for="dict in sys_device_type"
              :key="dict.value" :label="dict.label" :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="activeTimeout" label-width="auto">
          <template #label>
            <span>
              <el-tooltip content="指定时间无操作则过期（单位：秒），默认30分钟（1800秒）" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
              Token活跃超时时间
            </span>
          </template>
          <el-input v-model="form.activeTimeout" placeholder="请输入Token活跃超时时间" />
        </el-form-item>
        <el-form-item prop="timeout" label-width="auto">
          <template #label>
            <span>
              <el-tooltip content="指定时间必定过期（单位：秒），默认七天（604800秒）" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
              Token固定超时时间
            </span>
          </template>
          <el-input v-model="form.timeout" placeholder="请输入Token固定超时时间" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">
              {{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">ç¡® å®š</el-button>
          <el-button @click="cancel">取 æ¶ˆ</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Client" lang="ts">
import { listClient, getClient, delClient, addClient, updateClient, changeStatus } from '@/api/system/client';
import { ClientVO, ClientQuery, ClientForm } from '@/api/system/client/types';
import { ComponentInternalInstance } from 'vue';
import { ElForm } from 'element-plus';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
const { sys_grant_type } = toRefs<any>(proxy?.useDict("sys_grant_type"));
const { sys_device_type } = toRefs<any>(proxy?.useDict("sys_device_type"));

const clientList = ref<ClientVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref(ElForm);
const clientFormRef = ref(ElForm);

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: ClientForm = {
  id: undefined,
  clientId: undefined,
  clientKey: undefined,
  clientSecret: undefined,
  grantTypeList: undefined,
  deviceType: undefined,
  activeTimeout: undefined,
  timeout: undefined,
  status: undefined,
}
const data = reactive<PageData<ClientForm, ClientQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    clientId: undefined,
    clientKey: undefined,
    clientSecret: undefined,
    grantType: undefined,
    deviceType: undefined,
    activeTimeout: undefined,
    timeout: undefined,
    status: undefined,
  },
  rules: {
    id: [
      { required: true, message: "id不能为空", trigger: "blur" }
    ],
    clientId: [
      { required: true, message: "客户端id不能为空", trigger: "blur" }
    ],
    clientKey: [
      { required: true, message: "客户端key不能为空", trigger: "blur" }
    ],
    clientSecret: [
      { required: true, message: "客户端秘钥不能为空", trigger: "blur" }
    ],
    grantTypeList: [
      { required: true, message: "授权类型不能为空", trigger: "change" }
    ],
    deviceType: [
      { required: true, message: "设备类型不能为空", trigger: "change" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** æŸ¥è¯¢å®¢æˆ·ç«¯ç®¡ç†åˆ—表 */
const getList = async () => {
  loading.value = true;
  const res = await listClient(queryParams.value);
  clientList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** å–消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** è¡¨å•é‡ç½® */
const reset = () => {
  form.value = {...initFormData};
  clientFormRef.value.resetFields();
}

/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** é‡ç½®æŒ‰é’®æ“ä½œ */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  handleQuery();
}

/** å¤šé€‰æ¡†é€‰ä¸­æ•°æ® */
const handleSelectionChange = (selection: ClientVO[]) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** æ–°å¢žæŒ‰é’®æ“ä½œ */
const handleAdd = () => {
  dialog.visible = true;
  dialog.title = "添加客户端管理";
  nextTick(() => {
    reset();
  });
}

/** ä¿®æ”¹æŒ‰é’®æ“ä½œ */
const handleUpdate = (row?: ClientVO) => {
  loading.value = true
  dialog.visible = true;
  dialog.title = "修改客户端管理";
  nextTick(async () => {
    reset();
    const _id = row?.id || ids.value[0]
    const res = await getClient(_id);
    loading.value = false;
    Object.assign(form.value, res.data);
  });
}

/** æäº¤æŒ‰é’® */
const submitForm = () => {
  clientFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateClient(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addClient(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("修改成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** åˆ é™¤æŒ‰é’®æ“ä½œ */
const handleDelete = async (row?: ClientVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除客户端管理编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delClient(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
const handleExport = () => {
  proxy?.download('system/client/export', {
    ...queryParams.value
  }, `client_${new Date().getTime()}.xlsx`)
}

/** çŠ¶æ€ä¿®æ”¹  */
const handleStatusChange = async (row: ClientVO) => {
  let text = row.status === "0" ? "启用" : "停用"
  try {
    await proxy?.$modal.confirm('确认要"' + text + '"吗?');
    await changeStatus(row.id, row.status);
    proxy?.$modal.msgSuccess(text + "成功");
  } catch (err) {
    row.status = row.status === "0" ? "1" : "0";
  }
}

onMounted(() => {
  getList();
});
</script>

 src/views/system/menu/index.vue

@@ -180,7 +180,7 @@
          </el-col>
          <el-col :span="12" v-if="form.menuType === 'C'">
            <el-form-item>
              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
              <el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" />
              <template #label>
                <span>
                  <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">

 src/views/system/user/profile/index.vue

@@ -55,6 +55,9 @@
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
            <el-tab-pane label="第三方应用" name="thirdParty">
              <thirdParty :auths="state.auths" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
@@ -66,13 +69,16 @@
import userAvatar from "./userAvatar.vue";
import userInfo from "./userInfo.vue";
import resetPwd from "./resetPwd.vue";
import thirdParty from "./thirdParty.vue";
import { getAuthList } from "@/api/system/social/auth";
import { getUserProfile } from "@/api/system/user";

const activeTab = ref("userinfo");
const state = ref<{ user: any; roleGroup: string;  postGroup: string}>({
const state = ref<{ user: any; roleGroup: string;  postGroup: string; auths:any[]}>({
    user: {},
    roleGroup: '',
    postGroup: ''
    postGroup: '',
    auths: [],
});

const userForm = ref({});
@@ -85,7 +91,13 @@
    state.value.postGroup = res.data.postGroup;
};

const getAuths = async () => {
    const res = await getAuthList();
    state.value.auths = res.data;
};

onMounted(() => {
    getUser();
    getAuths();
})
</script>

 src/views/system/user/profile/thirdParty.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,140 @@
<template>
  <div>
    <el-table :data="auths" style="width: 100%; height: 100%; font-size: 10px">
      <el-table-column label="序号" width="50" type="index"></el-table-column>
      <el-table-column label="绑定账号平台" width="140" align="center" prop="source" show-overflow-tooltip />
      <el-table-column label="头像" width="120" align="center" prop="avatar">
        <template v-slot="scope">
          <img :src="scope.row.avatar" style="width: 45px; height: 45px" />
        </template>
      </el-table-column>
      <el-table-column label="系统账号" width="180" align="center" prop="userName" :show-overflow-tooltip="true" />
      <el-table-column label="绑定时间" width="180" align="center" prop="createTime" />
      <el-table-column label="操作" width="80" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-button size="small" type="text" @click="unlockAuth(scope.row)">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div id="git-user-binding">
      <h4 class="provider-desc">你可以绑定以下第三方帐号</h4>
      <div id="authlist" class="user-bind">
        <a class="third-app" href="#" @click="authUrl('gitee');" title="使用 Gitee è´¦å·æŽˆæƒç™»å½•">
          <div class="git-other-login-icon">
            <svg-icon icon-class="gitee" />
          </div>
          <span class="app-name">Gitee</span>
        </a>

        <a class="third-app" href="#" @click="authUrl('github');" title="使用 GitHub è´¦å·æŽˆæƒç™»å½•">
          <div class="git-other-login-icon">
            <svg-icon icon-class="github" />
          </div>
          <span class="app-name">Github</span>
        </a>

        <a class="third-app" href="#" @click="authUrl('wechar');" title="使用 å¾®ä¿¡ è´¦å·æŽˆæƒç™»å½•">
          <div class="git-other-login-icon">
            <svg-icon icon-class="wechat" />
          </div>
          <span class="app-name">WeiXin</span>
        </a>

        <a class="third-app" href="#" @click="authUrl('qq');" title="使用 QQ è´¦å·æŽˆæƒç™»å½•">
          <div class="git-other-login-icon">
            <svg-icon icon-class="qq" />
          </div>
          <span class="app-name">QQ</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { authUnlock, authBinding } from "@/api/system/social/auth";
import { PropType } from "vue";

const props = defineProps({
  auths: {
    type: Object as PropType<any>,
  }
});
const auths = computed(() => props.auths);


const unlockAuth = (row: any) => {
  ElMessageBox.confirm('您确定要解除"' + row.source + '"的账号绑定吗？')
    .then(() => {
      return authUnlock(row.id);
    }).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success("解绑成功");
      } else {
        ElMessage.error(res.msg);
      }
    }).catch(() => { });
};

const authUrl = (source: string) => {
  authBinding(source).then((res: any) => {
    if (res.code === 200) {
      window.location.href = res.msg;
    } else {
      ElMessage.error(res.msg);
    }
  });
};
</script>

<style type="text/css">
.user-bind .third-app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 80px;
  float: left;
}

.user-bind {
  font-size: 1rem;
  text-align: start;
  height: 50px;
  margin-top: 10px;
}

.git-other-login-icon>img {
  height: 32px;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #005980;
}

.provider-desc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
    "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
    sans-serif;
  font-size: 1.071rem;
}

td>img {
  height: 20px;
  width: 20px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
}
</style>