vue-sso-login-qcdl 1.0.0

package/README.md

@@ -0,0 +1,235 @@
+# @company/vue-sso-login
+
+Vue SSO 单点登录组件，支持 Vue 2 和 Vue 3。
+
+## 安装
+
+```bash
+npm install @company/vue-sso-login
+```
+
+## 快速开始
+
+### 1. 初始化 SSO 客户端
+
+```js
+// main.js
+import { createApp } from 'vue'
+import axios from 'axios'
+import { createSsoClient, createAxiosInterceptor } from '@company/vue-sso-login'
+
+const app = createApp(App)
+
+// 创建 axios 实例
+const axiosInstance = axios.create({
+  baseURL: 'https://api.example.com'
+})
+
+// 创建 SSO 客户端
+const ssoClient = createSsoClient({
+  axios: axiosInstance,
+  getRedirectUrlApi: '/api/sso/redirect-url',
+  getTokenApi: '/api/sso/token',
+  logoutApi: '/api/sso/logout',
+  callbackPath: '/sso-callback',
+  homePath: '/dashboard',
+  loginPath: '/login'
+})
+
+// 配置 axios 拦截器（自动添加 token）
+createAxiosInterceptor(axiosInstance)
+
+app.mount('#app')
+```
+
+### 2. 配置路由
+
+```js
+// router/index.js
+import { createRouter, createWebHistory } from 'vue-router'
+import { createSsoGuard, SsoCallback, useSso } from '@company/vue-sso-login'
+
+const routes = [
+  {
+    path: '/sso-callback',
+    name: 'SsoCallback',
+    component: {
+      template: '<SsoCallback :sso-client="ssoClient" />',
+      setup() {
+        return { ssoClient: useSso() }
+      }
+    }
+  },
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import('@/views/Dashboard.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 添加路由守卫
+router.beforeEach(createSsoGuard({
+  whiteList: ['/public', '/about'],
+  callbackPath: '/sso-callback'
+}))
+
+export default router
+```
+
+### 3. 登录页面使用
+
+```vue
+<template>
+  <div class="login-page">
+    <button @click="handleSsoLogin" :disabled="loading">
+      {{ loading ? '跳转中...' : 'SSO 登录' }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useSso } from '@company/vue-sso-login'
+
+const sso = useSso()
+const loading = ref(false)
+
+async function handleSsoLogin() {
+  loading.value = true
+  try {
+    await sso.redirectToSso()
+  } catch (error) {
+    console.error('SSO 登录失败:', error)
+    loading.value = false
+  }
+}
+</script>
+```
+
+### 4. 登出
+
+```js
+import { useSso } from '@company/vue-sso-login'
+
+const sso = useSso()
+
+// 登出并跳转登录页
+await sso.logout()
+
+// 登出但不跳转
+await sso.logout(false)
+```
+
+## API 参考
+
+### createSsoClient(options)
+
+创建 SSO 客户端实例。
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| axios | AxiosInstance | 是 | - | axios 实例 |
+| getRedirectUrlApi | string | 否 | '/sso/redirect-url' | 获取重定向地址接口 |
+| getTokenApi | string | 否 | '/sso/token' | 获取 token 接口 |
+| logoutApi | string | 否 | '/sso/logout' | 登出接口 |
+| callbackPath | string | 否 | '/sso-callback' | 回调页面路径 |
+| homePath | string | 否 | '/' | 首页路径 |
+| loginPath | string | 否 | '/login' | 登录页路径 |
+| storageOptions | object | 否 | {} | 存储配置 |
+| headers | object | 否 | {} | 自定义请求头 |
+
+### SsoClient 实例方法
+
+| 方法 | 说明 |
+|------|------|
+| redirectToSso(params?) | 跳转到 SSO 登录页 |
+| getTokenByCode(code, state?) | 使用授权码获取 token |
+| handleCallback(route) | 处理回调页面逻辑 |
+| isAuthenticated() | 检查是否已登录 |
+| getToken() | 获取当前 token |
+| getUserInfo() | 获取用户信息 |
+| logout(redirectToLogin?) | 登出 |
+
+### createSsoGuard(options)
+
+创建路由守卫。
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| ssoClient | SsoClient | SSO 客户端实例 |
+| whiteList | string[] | 白名单路径 |
+| loginPath | string | 登录页路径 |
+| callbackPath | string | 回调页路径 |
+
+### SsoCallback 组件
+
+中转页面组件，用于处理 SSO 回调。
+
+| Props | 类型 | 必填 | 说明 |
+|-------|------|------|------|
+| ssoClient | SsoClient | 是 | SSO 客户端实例 |
+| loadingText | string | 否 | 加载提示文字 |
+| homePath | string | 否 | 首页路径 |
+| autoRedirect | boolean | 否 | 是否自动跳转 |
+
+| Events | 说明 |
+|--------|------|
+| success | 登录成功 |
+| error | 登录失败 |
+
+| Slots | 说明 |
+|-------|------|
+| loading | 自定义加载状态 |
+| error | 自定义错误状态 |
+
+## 接口约定
+
+### 获取重定向地址接口
+
+请求：
+```
+GET /api/sso/redirect-url?callback_url=xxx
+```
+
+响应：
+```json
+{
+  "code": 0,
+  "data": {
+    "redirect_url": "https://sso.example.com/login?..."
+  }
+}
+```
+
+### 获取 Token 接口
+
+请求：
+```
+POST /api/sso/token
+{
+  "code": "授权码",
+  "state": "状态码",
+  "redirect_uri": "回调地址"
+}
+```
+
+响应：
+```json
+{
+  "code": 0,
+  "data": {
+    "access_token": "xxx",
+    "refresh_token": "xxx",
+    "user_info": {}
+  }
+}
+```
+
+## License
+
+MIT

package/dist/index.cjs.js

@@ -0,0 +1,481 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+/**
+ * Token 存储工具
+ */
+const DEFAULT_TOKEN_KEY = 'sso_access_token';
+const DEFAULT_REFRESH_TOKEN_KEY = 'sso_refresh_token';
+const DEFAULT_USER_INFO_KEY = 'sso_user_info';
+
+function createStorage(options = {}) {
+  const {
+    tokenKey = DEFAULT_TOKEN_KEY,
+    refreshTokenKey = DEFAULT_REFRESH_TOKEN_KEY,
+    userInfoKey = DEFAULT_USER_INFO_KEY,
+    storage = localStorage
+  } = options;
+
+  return {
+    // Token 操作
+    setToken(token) {
+      storage.setItem(tokenKey, token);
+    },
+    getToken() {
+      return storage.getItem(tokenKey)
+    },
+    removeToken() {
+      storage.removeItem(tokenKey);
+    },
+
+    // Refresh Token 操作
+    setRefreshToken(token) {
+      storage.setItem(refreshTokenKey, token);
+    },
+    getRefreshToken() {
+      return storage.getItem(refreshTokenKey)
+    },
+    removeRefreshToken() {
+      storage.removeItem(refreshTokenKey);
+    },
+
+    // 用户信息操作
+    setUserInfo(info) {
+      storage.setItem(userInfoKey, JSON.stringify(info));
+    },
+    getUserInfo() {
+      const info = storage.getItem(userInfoKey);
+      return info ? JSON.parse(info) : null
+    },
+    removeUserInfo() {
+      storage.removeItem(userInfoKey);
+    },
+
+    // 清除所有
+    clearAll() {
+      storage.removeItem(tokenKey);
+      storage.removeItem(refreshTokenKey);
+      storage.removeItem(userInfoKey);
+    }
+  }
+}
+
+createStorage();
+
+/**
+ * SSO 核心逻辑
+ */
+
+class SsoClient {
+  constructor(options = {}) {
+    this.options = {
+      // SSO 服务端接口地址
+      ssoServerUrl: '',
+      // 获取重定向地址的接口
+      getRedirectUrlApi: '/sso/redirect-config',
+      // 获取 token 的接口
+      getTokenApi: '/sso/exchange-token',
+      // 登出接口
+      logoutApi: '/sso/logout',
+      // 回调页面路径
+      callbackPath: '/sso-callback',
+      // 登录成功后跳转的首页
+      homePath: '/',
+      // 登录页路径
+      loginPath: '/login',
+      // axios 实例
+      axios: null,
+      // 存储配置
+      storageOptions: {},
+      // 自定义请求头
+      headers: {},
+      ...options
+    };
+
+    this.storage = createStorage(this.options.storageOptions);
+    this.axios = this.options.axios;
+
+    if (!this.axios) {
+      throw new Error('[vue-sso-login] axios instance is required')
+    }
+  }
+
+  /**
+   * 获取 SSO 重定向地址并跳转
+   */
+  async redirectToSso(params = {}) {
+    try {
+      // const callbackUrl = this._getCallbackUrl()
+      const response = await this.axios.get(this.options.getRedirectUrlApi);
+
+      const redirectUrl = response.data?.idpRedirectUrl;
+      if (redirectUrl) {
+        window.location.href = redirectUrl;
+      } else {
+        throw new Error('获取 SSO 重定向地址失败')
+      }
+    } catch (error) {
+      console.error('[vue-sso-login] redirectToSso error:', error);
+      throw error
+    }
+  }
+
+  /**
+   * 使用授权码获取 token
+   */
+  async getTokenByCode(code, state = '') {
+    try {
+      const response = await this.axios.post(this.options.getTokenApi, {
+        code,
+        state,
+      }, {
+        headers: this.options.headers
+      });
+
+      const data = response.data?.data || response.data;
+      if (data?.access_token) {
+        this.storage.setToken(data.access_token);
+        if (data.refresh_token) {
+          this.storage.setRefreshToken(data.refresh_token);
+        }
+        if (data.user_info) {
+          this.storage.setUserInfo(data.user_info);
+        }
+        return data
+      } else {
+        throw new Error('获取 token 失败')
+      }
+    } catch (error) {
+      console.error('[vue-sso-login] getTokenByCode error:', error);
+      throw error
+    }
+  }
+
+
+  /**
+   * 检查是否已登录
+   */
+  isAuthenticated() {
+    return !!this.storage.getToken()
+  }
+
+  /**
+   * 获取当前 token
+   */
+  getToken() {
+    return this.storage.getToken()
+  }
+
+  /**
+   * 获取用户信息
+   */
+  getUserInfo() {
+    return this.storage.getUserInfo()
+  }
+
+  /**
+   * 登出
+   */
+  async logout(redirectToLogin = true) {
+    try {
+      if (this.options.logoutApi) {
+        await this.axios.post(this.options.logoutApi, {}, {
+          headers: this.options.headers
+        });
+      }
+    } catch (error) {
+      console.warn('[vue-sso-login] logout api error:', error);
+    } finally {
+      this.storage.clearAll();
+      if (redirectToLogin) {
+        window.location.href = this.options.loginPath;
+      }
+    }
+  }
+
+  /**
+   * 处理回调页面逻辑
+   */
+  async handleCallback(route) {
+    const code = route.query.code;
+    const state = route.query.state;
+    const error = route.query.error;
+
+    if (error) {
+      throw new Error(route.query.error_description || error)
+    }
+
+    if (!code) {
+      throw new Error('缺少授权码 code')
+    }
+
+    return await this.getTokenByCode(code, state)
+  }
+
+  /**
+   * 获取回调 URL
+   */
+  _getCallbackUrl() {
+    const { protocol, host } = window.location;
+    return `${protocol}//${host}${this.options.callbackPath}`
+  }
+}
+
+var script = {
+  name: 'SsoCallback',
+  props: {
+    ssoClient: {
+      type: Object,
+      required: true
+    },
+    loadingText: {
+      type: String,
+      default: '正在登录中，请稍候...'
+    },
+    homePath: {
+      type: String,
+      default: '/'
+    },
+    autoRedirect: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      error: null
+    }
+  },
+  async mounted() {
+    await this.handleSsoCallback();
+  },
+  methods: {
+    async handleSsoCallback() {
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const result = await this.ssoClient.handleCallback(this.$route);
+        this.$emit('success', result);
+
+        if (this.autoRedirect) {
+          const redirectPath = this.$route.query.redirect || this.homePath;
+          this.$router.replace(redirectPath);
+        }
+      } catch (err) {
+        this.error = err.message || '登录失败，请重试';
+        this.$emit('error', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    retry() {
+      this.ssoClient.redirectToSso();
+    }
+  }
+};
+
+const _hoisted_1 = { class: "sso-callback" };
+const _hoisted_2 = {
+  key: 0,
+  class: "sso-callback__loading"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "sso-callback__error"
+};
+const _hoisted_4 = { class: "sso-callback__error-text" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    ($data.loading)
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "loading", {}, () => [
+            _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "sso-callback__spinner" }, null, -1 /* CACHED */)),
+            vue.createElementVNode("p", null, vue.toDisplayString($props.loadingText), 1 /* TEXT */)
+          ])
+        ]))
+      : ($data.error)
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            vue.renderSlot(_ctx.$slots, "error", { error: $data.error }, () => [
+              vue.createElementVNode("p", _hoisted_4, vue.toDisplayString($data.error), 1 /* TEXT */),
+              vue.createElementVNode("button", {
+                onClick: _cache[0] || (_cache[0] = (...args) => ($options.retry && $options.retry(...args))),
+                class: "sso-callback__retry-btn"
+              }, "重试")
+            ])
+          ]))
+        : vue.createCommentVNode("v-if", true)
+  ]))
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".sso-callback[data-v-8ca5b118]{align-items:center;background:#f5f5f5;display:flex;justify-content:center;min-height:100vh}.sso-callback__loading[data-v-8ca5b118]{text-align:center}.sso-callback__spinner[data-v-8ca5b118]{animation:spin-8ca5b118 1s linear infinite;border:3px solid #e0e0e0;border-radius:50%;border-top-color:#1890ff;height:40px;margin:0 auto 16px;width:40px}@keyframes spin-8ca5b118{to{transform:rotate(1turn)}}.sso-callback__error[data-v-8ca5b118]{text-align:center}.sso-callback__error-text[data-v-8ca5b118]{color:#ff4d4f;margin-bottom:16px}.sso-callback__retry-btn[data-v-8ca5b118]{background:#1890ff;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:8px 24px}";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-8ca5b118";
+script.__file = "src/components/SsoCallback.vue";
+
+/**
+ * Vue SSO 单点登录组件
+ */
+
+// 全局 SSO 实例
+let ssoInstance = null;
+
+/**
+ * 创建 SSO 实例
+ */
+function createSsoClient(options) {
+  ssoInstance = new SsoClient(options);
+  return ssoInstance
+}
+
+/**
+ * 获取 SSO 实例
+ */
+function useSso() {
+  if (!ssoInstance) {
+    throw new Error('[vue-sso-login] SSO client not initialized. Call createSsoClient first.')
+  }
+  return ssoInstance
+}
+
+/**
+ * 创建路由守卫
+ */
+function createSsoGuard(options = {}) {
+  const {
+    ssoClient,
+    whiteList = [],
+    loginPath = '/login',
+    callbackPath = '/sso-callback'
+  } = options;
+
+  const client = ssoClient || ssoInstance;
+
+  return async (to, from, next) => {
+    // 白名单路径直接放行
+    if (whiteList.includes(to.path) || to.path === callbackPath) {
+      return next()
+    }
+
+    // 已登录直接放行
+    if (client.isAuthenticated()) {
+      // 已登录访问登录页，跳转首页
+      if (to.path === loginPath) {
+        return next(client.options.homePath)
+      }
+      return next()
+    }
+
+    // 未登录，跳转 SSO 登录
+    try {
+      await client.redirectToSso({ redirect: to.fullPath });
+    } catch (error) {
+      console.error('[vue-sso-login] redirect error:', error);
+      next(loginPath);
+    }
+  }
+}
+
+/**
+ * 创建 axios 请求拦截器
+ */
+function createAxiosInterceptor(axiosInstance, options = {}) {
+  const { tokenHeaderKey = 'Authorization', tokenPrefix = 'Bearer ' } = options;
+  const client = options.ssoClient || ssoInstance;
+
+  // 请求拦截器 - 自动添加 token
+  axiosInstance.interceptors.request.use(
+    (config) => {
+      const token = client.getToken();
+      if (token) {
+        config.headers[tokenHeaderKey] = `${tokenPrefix}${token}`;
+      }
+      return config
+    },
+    (error) => Promise.reject(error)
+  );
+
+  // 响应拦截器 - 处理 401
+  axiosInstance.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+      if (error.response?.status === 401) {
+        client.storage.clearAll();
+        await client.redirectToSso();
+      }
+      return Promise.reject(error)
+    }
+  );
+}
+
+/**
+ * Vue 插件安装
+ */
+function install(app, options) {
+  const client = createSsoClient(options);
+
+  // Vue 3
+  if (app.config?.globalProperties) {
+    app.config.globalProperties.$sso = client;
+    app.component('SsoCallback', script);
+  }
+  // Vue 2
+  else {
+    app.prototype.$sso = client;
+    app.component('SsoCallback', script);
+  }
+}
+
+var index = {
+  install,
+  SsoClient,
+  SsoCallback: script,
+  createSsoClient,
+  useSso,
+  createSsoGuard,
+  createAxiosInterceptor
+};
+
+exports.SsoCallback = script;
+exports.SsoClient = SsoClient;
+exports.createAxiosInterceptor = createAxiosInterceptor;
+exports.createSsoClient = createSsoClient;
+exports.createSsoGuard = createSsoGuard;
+exports.createStorage = createStorage;
+exports.default = index;
+exports.install = install;
+exports.useSso = useSso;