wookoon-cas-sdk

Wookoon CAS Sdk

架构总结

┌─────────────┐
│  Vue 前端    │
│  (SDK)      │
└──────┬──────┘
       │ 1. 调用 /api/cas/login-auto 跳转登录 CAS URL
       │ 2. 回调带 code 到前端
       │ 3. 前端调用 /api/cas/callback
       ▼
┌─────────────────────────────────┐
│       Auth Service              │
│  ┌───────────────────────────┐  │
│  │  Casdoor SDK              │  │
│  │  - 用 code 换 token       │  │
│  │  - 解析用户信息            │  │
│  └───────────────────────────┘  │
│  ┌───────────────────────────┐  │
│  │  防腐层 (Adapter)          │  │
│  │  Casdoor User → Standard  │  │
│  └───────────────────────────┘  │
│  ┌───────────────────────────┐  │
│  │  JWT 签发                  │  │
│  │  - 签发业务系统 JWT        │  │
│  └───────────────────────────┘  │
└──────┬──────────────────────────┘
       │ 返回 { token, user }
       ▼
┌─────────────┐
│  Vue 前端    │
│  保存 Token  │
└──────┬──────┘
       │ 后续请求携带 Bearer Token
       ▼
┌─────────────────────────────────┐
│   业务服务 (订单/用户/支付等)      │
│   - 只需验证 JWT 签名            │
│   - 不需要 Casdoor SDK          │
└─────────────────────────────────┘

业务项目使用指南 (如何在你的 Vue 3 项目中接入)

1. 安装

pnpm add wookoon-cas-sdk@^0.1

2. 初始化 (main.ts)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createEzWookoon } from 'wookoon-cas-sdk'

const app = createApp(App)

createEzWookoon({
  serverUrl: import.meta.env.VITE_SERVER_URL,
  router: router,
})

app.use(router)
app.mount('#app')

在 App.vue 中监听回调

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useEzWookoonCallback } from 'wookoon-cas-sdk'

const router = useRouter()
useEzWookoonCallback(router)
// ...
</script>

3. 在组件中使用

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useEzWookoonAuth } from 'wookoon-cas-sdk'

const router = useRouter()
const { user, isAuthenticated, isLoading, login, logout, profile } = useEzWookoonAuth(router)

function handleLogin() {
  login()
}

function handleLogout() {
  logout()
  router.push('/')
}

function handleMyProfile() {
  profile()
}
</script>

<template>
  <nav>
    <div v-if="isLoading">加载中...</div>
    <template v-else-if="isAuthenticated && user">
      <span>欢迎, <a href="#" @click="handleMyProfile()">{{ user.displayName || user.username }}</a></span>
      &ensp;
      <button @click="handleLogout">退出</button>
    </template>
    <template v-else>
      <button @click="handleLogin">登录</button>
    </template>
  </nav>
</template>

4. 配合 Axios 自动携带 Token, 支持无痛刷新

import { useEzWookoonRequest } from 'wookoon-cas-sdk';
import { useRouter } from 'vue-router'

const router = useRouter()
const api = useEzWookoonRequest(router)
// ...

api.get('/api/foo/bar').then((r) => {
  // TODO
})

5. src/env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_SERVER_URL: string
  readonly VITE_API_BASE_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

6. .env

VITE_SERVER_URL="http://localhost:8080"