DSingleSignOn 单点登录

用于单点登录操作。

WARNING

目前本组件使用了vue-router以读取路由参数，仅支持应用挂载了VueRouter.createRouter的根实例后使用。

INFO

单点登录需要地址栏携带查询字符串参数。点击此处在地址栏上添加字符串参数，刷新后查看效果。

基础用法

使用api参数指定API地址，读取query参数指定的地址栏查询字符串参数后进行请求。

使用response-token参数指定返回标识符的名称，response-data-token事件获取返回的标识符。

等待加载

查看源代码

vue

<template>
  <div style="border: 1px solid black; padding: 5px">
    <d-single-sign-on
      api="https://yesno.wtf/api"
      query="auth_code"
      request-token="force"
      request-method="get"
      request-payload="params"
      response-token="answer"
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>
    <span v-if="token">获取的标识符是：{{ token }}</span>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
const token = ref('');

function handleResponseToken(res: string) {
  token.value = res;
}
</script>

<style lang="scss" scoped></style>

<template>
  <div style="border: 1px solid black; padding: 5px">
    <d-single-sign-on
      api="https://yesno.wtf/api"
      query="auth_code"
      request-token="force"
      request-method="get"
      request-payload="params"
      response-token="answer"
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>
    <span v-if="token">获取的标识符是：{{ token }}</span>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
const token = ref('');

function handleResponseToken(res: string) {
  token.value = res;
}
</script>

<style lang="scss" scoped></style>

自定义请求与响应参数

可以自定义请求方式，请求与响应的参数名称。

使用query参数指定查询字符串参数名称，使用request-token参数指定请求时的标识符名称。

使用request-method和request-payload定义请求类型和负载类型，默认为POST请求。

使用response-token定义响应的标识符名称。

查看源代码

vue

<template>
  <div style="border: 1px solid black; padding: 5px">
    <d-single-sign-on
      api="https://yesno.wtf/api"
      query="auth_code"
      request-token="force"
      request-method="get"
      request-payload="params"
      response-token="answer"
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>
    <span v-if="token">获取的标识符是：{{ token }}</span>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
const token = ref('');

function handleResponseToken(res: string) {
  token.value = res;
}
</script>

<style lang="scss" scoped></style>

<template>
  <div style="border: 1px solid black; padding: 5px">
    <d-single-sign-on
      api="https://yesno.wtf/api"
      query="auth_code"
      request-token="force"
      request-method="get"
      request-payload="params"
      response-token="answer"
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>
    <span v-if="token">获取的标识符是：{{ token }}</span>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
const token = ref('');

function handleResponseToken(res: string) {
  token.value = res;
}
</script>

<style lang="scss" scoped></style>

INFO

未设置request-token参数时，请求时的标识符名称与query参数相同。

自定义消息

可以使用插槽自定义显示的消息，也可以用hide-message关闭消息显示。

自定义显示消息关闭消息显示

vue

<template>
  <d-single-sign-on>
    <template #not-start>自定义未开始信息</template>
    <template #pending>自定义加载中消息</template>
    <template #success>自定义加载成功消息</template>
    <template #failed>自定义加载失败消息</template>
  </d-single-sign-on>
</template>

<template>
  <d-single-sign-on>
    <template #not-start>自定义未开始信息</template>
    <template #pending>自定义加载中消息</template>
    <template #success>自定义加载成功消息</template>
    <template #failed>自定义加载失败消息</template>
  </d-single-sign-on>
</template>

vue

<d-single-sign-on hide-message> </d-single-sign-on>

<d-single-sign-on hide-message> </d-single-sign-on>

自定义开始请求、处理响应

内部对响应进行的解析可能不能满足需求，可以使用manual-start属性设置不自动动开始请求，manual-handle属性设置手动处理返回的响应。

使用start方法手动开始请求、response-promise事件获取响应。

响应：

查看源代码

vue

<template>
  <div style="border: 1px solid black; padding: 5px; overflow: scroll">
    <d-single-sign-on
      ref="singleSignOnRef"
      api="https://yesno.wtf/api"
      query="auth_code"
      request-method="get"
      request-payload="params"
      manual-start
      manual-handle
      @response-promise="handleResponsePromise"
    ></d-single-sign-on>

    <el-button @click="handleSingleSignOnStart"
      >手动开始和手动处理请求</el-button
    >
    <div>响应：{{ responseString }}</div>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
import { ElButton } from 'element-plus';

const singleSignOnRef = ref<InstanceType<typeof DSingleSignOn> | null>();
const responseString = ref('');

function handleSingleSignOnStart() {
  singleSignOnRef.value.start();
}

function handleResponsePromise(response) {
  response
    .then((response) => {
      responseString.value = String(JSON.stringify(response));
    })
    .catch((error) => {
      responseString.value = String(JSON.stringify(error));
    });
}
</script>

<style lang="scss" scoped></style>

<template>
  <div style="border: 1px solid black; padding: 5px; overflow: scroll">
    <d-single-sign-on
      ref="singleSignOnRef"
      api="https://yesno.wtf/api"
      query="auth_code"
      request-method="get"
      request-payload="params"
      manual-start
      manual-handle
      @response-promise="handleResponsePromise"
    ></d-single-sign-on>

    <el-button @click="handleSingleSignOnStart"
      >手动开始和手动处理请求</el-button
    >
    <div>响应：{{ responseString }}</div>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
import { ElButton } from 'element-plus';

const singleSignOnRef = ref<InstanceType<typeof DSingleSignOn> | null>();
const responseString = ref('');

function handleSingleSignOnStart() {
  singleSignOnRef.value.start();
}

function handleResponsePromise(response) {
  response
    .then((response) => {
      responseString.value = String(JSON.stringify(response));
    })
    .catch((error) => {
      responseString.value = String(JSON.stringify(error));
    });
}
</script>

<style lang="scss" scoped></style>

TIP

start方法自身也返回了异步操作响应。手动开始请求时可以使用以下的方式处理响应，无需response-promise事件获取响应：

singleSignOnRef.value.start().then((response) => {
  // 处理响应
});

singleSignOnRef.value.start().then((response) => {
  // 处理响应
});

同时参见自定义Axios请求配置的源代码。

自定义Axios实例

内部创建的基础Axios实例可能不能满足需求，可以使用axios-instance自定义Axios实例，常用于自定义请求拦截器添加身份标识符。

等待加载

响应：

查看源代码

vue

<template>
  <div style="border: 1px solid black; padding: 5px; overflow: scroll">
    <d-single-sign-on
      ref="singleSignOnRef"
      api="/api"
      query="auth_code"
      :axios-instance="service"
      request-method="get"
      request-payload="params"
      response-token="answer"
      manual-start
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>

    <el-button @click="handleSingleSignOnStart">开始自定义Axios请求</el-button>
    <div>响应：{{ token }}</div>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { DSingleSignOn } from 'dc-pro-component';

import { ref } from 'vue';
import axios from 'axios';
import { ElButton } from 'element-plus';

const singleSignOnRef = ref<InstanceType<typeof DSingleSignOn> | null>();
const token = ref('');

// 自定义Axios实例
const service = axios.create({
  baseURL: '/yesno-wtf',
  timeout: 30000,
});

// 自定义Axios请求拦截器
service.interceptors.request.use(
  (config) => {
    config.headers['Authorization'] =
      'Authorization-Token ' + new Date().valueOf();
    return config;
  },
  (error) => {
    Promise.reject(error);
  },
);

// 自定义Axios响应拦截器
service.interceptors.response.use(
  (response) => {
    return Promise.resolve(response.data ?? response);
  },
  (error) => {
    return Promise.reject(error);
  },
);

function handleResponseToken(res: string) {
  if (res) {
    token.value = res;
  }
}

function handleSingleSignOnStart() {
  singleSignOnRef.value.start();
}
</script>

<style lang="scss" scoped></style>

<template>
  <div style="border: 1px solid black; padding: 5px; overflow: scroll">
    <d-single-sign-on
      ref="singleSignOnRef"
      api="/api"
      query="auth_code"
      :axios-instance="service"
      request-method="get"
      request-payload="params"
      response-token="answer"
      manual-start
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>

    <el-button @click="handleSingleSignOnStart">开始自定义Axios请求</el-button>
    <div>响应：{{ token }}</div>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { DSingleSignOn } from 'dc-pro-component';

import { ref } from 'vue';
import axios from 'axios';
import { ElButton } from 'element-plus';

const singleSignOnRef = ref<InstanceType<typeof DSingleSignOn> | null>();
const token = ref('');

// 自定义Axios实例
const service = axios.create({
  baseURL: '/yesno-wtf',
  timeout: 30000,
});

// 自定义Axios请求拦截器
service.interceptors.request.use(
  (config) => {
    config.headers['Authorization'] =
      'Authorization-Token ' + new Date().valueOf();
    return config;
  },
  (error) => {
    Promise.reject(error);
  },
);

// 自定义Axios响应拦截器
service.interceptors.response.use(
  (response) => {
    return Promise.resolve(response.data ?? response);
  },
  (error) => {
    return Promise.reject(error);
  },
);

function handleResponseToken(res: string) {
  if (res) {
    token.value = res;
  }
}

function handleSingleSignOnStart() {
  singleSignOnRef.value.start();
}
</script>

<style lang="scss" scoped></style>

TIP

本组件已经支持常见的return Promise.resolve(response.data)响应拦截器，无需使用response-promise自定义处理响应。

// 自定义的Axios响应拦截器
service.interceptors.response.use(
  (response) => {
    return Promise.resolve(response.data ?? response); // 无需自定义处理响应
  },
  (error) => {
    return Promise.reject(error);
  },
);

// 自定义的Axios响应拦截器
service.interceptors.response.use(
  (response) => {
    return Promise.resolve(response.data ?? response); // 无需自定义处理响应
  },
  (error) => {
    return Promise.reject(error);
  },
);

自定义Axios请求配置

内部生成的Axios请求配置可能不能满足需求，可以使用request-axios-config属性手动设置Axios请求配置。

响应：

查看源代码

vue

<template>
  <div style="border: 1px solid black; padding: 5px; overflow: scroll">
    <d-single-sign-on
      ref="singleSignOnRef"
      :request-axios-config="customAxiosRequestConfig"
      manual-start
      manual-handle
    ></d-single-sign-on>

    <el-button @click="handleSingleSignOnStart">开始自定义请求</el-button>
    <div>响应：{{ token }}</div>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { DSingleSignOn } from 'dc-pro-component';

import { ref } from 'vue';
import { AxiosRequestConfig } from 'axios';
import { ElButton } from 'element-plus';

const singleSignOnRef = ref<InstanceType<typeof DSingleSignOn> | null>();
const token = ref('');

// 自定义Axios请求配置
const customAxiosRequestConfig: AxiosRequestConfig = {
  url: 'https://yesno.wtf/api',
  method: 'get',
  params: {
    force: 'maybe',
  },
  timeout: 30000,
};

// 使用start的响应进行处理
function handleSingleSignOnStart() {
  singleSignOnRef.value
    .start()
    .then((response) => {
      token.value = response.data?.answer;
    })
    .catch((error) => {
      token.value = String(JSON.stringify(error));
    });
}
</script>

<style lang="scss" scoped></style>

<template>
  <div style="border: 1px solid black; padding: 5px; overflow: scroll">
    <d-single-sign-on
      ref="singleSignOnRef"
      :request-axios-config="customAxiosRequestConfig"
      manual-start
      manual-handle
    ></d-single-sign-on>

    <el-button @click="handleSingleSignOnStart">开始自定义请求</el-button>
    <div>响应：{{ token }}</div>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { DSingleSignOn } from 'dc-pro-component';

import { ref } from 'vue';
import { AxiosRequestConfig } from 'axios';
import { ElButton } from 'element-plus';

const singleSignOnRef = ref<InstanceType<typeof DSingleSignOn> | null>();
const token = ref('');

// 自定义Axios请求配置
const customAxiosRequestConfig: AxiosRequestConfig = {
  url: 'https://yesno.wtf/api',
  method: 'get',
  params: {
    force: 'maybe',
  },
  timeout: 30000,
};

// 使用start的响应进行处理
function handleSingleSignOnStart() {
  singleSignOnRef.value
    .start()
    .then((response) => {
      token.value = response.data?.answer;
    })
    .catch((error) => {
      token.value = String(JSON.stringify(error));
    });
}
</script>

<style lang="scss" scoped></style>

INFO

request-axios-config属性生效时，query、request-token、request-method、request-payload均不生效。

TIP

手动设置Axios请求配置时，组件不会检查字符串查询参数，也不会向配置内自动添加。所以通常需要手动开始请求（manual-start），以携带含有参数的配置。

多个请求参数，多个返回参数

支持同时使用多个地址栏参数进行请求。支持以对象方式同时返回多个标识符。

点击此处在地址栏上添加字符串参数，刷新后查看效果。

等待加载

查看源代码

vue

<template>
  <div style="border: 1px solid black; padding: 5px">
    <d-single-sign-on
      api="https://yesno.wtf/api"
      :query="['auth_code', 'query_second']"
      :request-token="['token', 'force']"
      request-method="get"
      request-payload="params"
      :response-token="['answer', 'forced', 'token']"
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>
    <span v-if="token">获取的标识符是：{{ token }}</span>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
const token = ref('');

function handleResponseToken(res) {
  token.value = res;
}
</script>

<style lang="scss" scoped></style>

<template>
  <div style="border: 1px solid black; padding: 5px">
    <d-single-sign-on
      api="https://yesno.wtf/api"
      :query="['auth_code', 'query_second']"
      :request-token="['token', 'force']"
      request-method="get"
      request-payload="params"
      :response-token="['answer', 'forced', 'token']"
      @response-data-token="handleResponseToken"
    ></d-single-sign-on>
    <span v-if="token">获取的标识符是：{{ token }}</span>
  </div>
</template>

<script setup lang="ts" name="SingleSignOn">
import { ref } from 'vue';
import { DSingleSignOn } from 'dc-pro-component';
const token = ref('');

function handleResponseToken(res) {
  token.value = res;
}
</script>

<style lang="scss" scoped></style>

INFO

设置返回的多个标识符如果有不存在的，对应项目将返回null。

API

属性

属性名	说明	类型	可选值	默认值
`api`	单点登录请求api地址	string	-	-
`query`	地址栏字符串参数名称	string / string[]	-	-
`request-token`	单点登录请求标识符名称	string / string[]	-	token
`request-method`	单点登录请求类型	string	-	POST
`request-payload`	单点登录请求负载类型	string	data / params	data
`request-axios-config`	单点登录Axios请求配置项，此项生效时`query`、`request-token`、`request-method`、`request-payload`均不生效	AxiosRequestConfig	-	-
`response-token`	单点登录成功后返回标识符名称	string	-	token
`hide-message`	是否隐藏消息	boolean	true / false	false
`axios-instance`	外部Axios实例	AxiosInstance	-	-
`manual-start`	是否手动开始请求	boolean	true / false	false
`manual-handle`	是否手动处理Axios响应	boolean	true / false	false

插槽

插槽名	说明
`not-start`	请求未开始加载时显示消息的内容
`pending`	请求加载中显示消息的内容
`success`	请求成功显示消息的内容
`failed`	请求失败显示消息的内容

事件

事件名	说明	回调参数
`response-data-token`	单点登录返回标识符内容	`string \| Record<string, string>`
`response-promise`	单点登录返回异步操作Promise	`Promise<any> \| AxiosPromise<any>`

外部方法

方法名	说明	类型
`start`	手动开始单点登录请求	Function: `() => Promise<any>`

外部属性

属性名	说明	类型	可选值
`status`	请求状态	string	not-start / pending / success / failed
`message`	消息	string	-

DSingleSignOn 单点登录 ​

基础用法 ​

自定义请求与响应参数 ​

自定义消息 ​

自定义开始请求、处理响应 ​

自定义Axios实例 ​

自定义Axios请求配置 ​

多个请求参数，多个返回参数 ​

API ​

属性 ​

插槽 ​

事件 ​

外部方法 ​

外部属性 ​

DSingleSignOn 单点登录

基础用法

自定义请求与响应参数

自定义消息

自定义开始请求、处理响应

自定义Axios实例

自定义Axios请求配置

多个请求参数，多个返回参数

API

属性

插槽

事件

外部方法

外部属性