create-art-app-pino 1.0.0

package/template/auth-art/src/api/auth.ts

@@ -0,0 +1,37 @@
+import request from '@/utils/http'
+
+export interface LoginParams {
+  userName: string
+  password: string
+}
+
+export interface LoginResponse {
+  token: string
+  refreshToken?: string
+}
+
+export interface UserInfo {
+  userId: number | string
+  userName: string
+  avatar?: string
+  roles?: string[]
+}
+
+/**
+ * 登录
+ */
+export function fetchLogin(params: LoginParams) {
+  return request.post<LoginResponse>({
+    url: '/api/auth/login',
+    params,
+  })
+}
+
+/**
+ * 获取用户信息
+ */
+export function fetchGetUserInfo() {
+  return request.get<UserInfo>({
+    url: '/api/user/info',
+  })
+}

package/template/auth-art/src/router/guards/beforeEach.ts

@@ -0,0 +1,64 @@
+import type { Router } from 'vue-router'
+import NProgress from 'nprogress'
+import { useUserStore } from '@/store/modules/user'
+import { fetchGetUserInfo } from '@/api/auth'
+
+// 是否已获取过用户信息
+let hasLoadedUserInfo = false
+
+/**
+ * 重置路由守卫状态（登出时调用）
+ */
+export function resetRouterState(): void {
+  hasLoadedUserInfo = false
+}
+
+/**
+ * 设置路由前置守卫
+ */
+export function setupBeforeEachGuard(router: Router): void {
+  router.beforeEach(async (to, _from, next) => {
+    NProgress.start()
+
+    const userStore = useUserStore()
+
+    // 访问登录页直接放行
+    if (to.path === '/login') {
+      if (userStore.isLogin) {
+        next('/')
+      } else {
+        next()
+      }
+      return
+    }
+
+    // 未登录跳转到登录页
+    if (!userStore.isLogin) {
+      next({
+        path: '/login',
+        query: { redirect: to.fullPath },
+      })
+      return
+    }
+
+    // 首次进入已登录页面时获取用户信息
+    if (!hasLoadedUserInfo) {
+      try {
+        const userInfo = await fetchGetUserInfo()
+        userStore.setUserInfo(userInfo as any)
+        hasLoadedUserInfo = true
+      } catch (error) {
+        console.error('[Router] 获取用户信息失败:', error)
+        userStore.logOut()
+        next({ path: '/login' })
+        return
+      }
+    }
+
+    next()
+  })
+
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}

package/template/auth-art/src/router/index.ts.ejs

@@ -0,0 +1,52 @@
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { setupBeforeEachGuard } from './guards/beforeEach'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/auth/login/index.vue'),
+    meta: { title: '登录' },
+  },
+  {
+    path: '/',
+    name: 'Layout',
+    component: () => import('@/views/index/index.vue'),
+    redirect: '/dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        name: 'Dashboard',
+        component: () => import('@/views/dashboard/index.vue'),
+        meta: { title: '仪表盘', icon: 'ep:home-filled' },
+      },
+    ],
+  },
+  {
+    path: '/403',
+    name: 'Forbidden',
+    component: () => import('@/views/exception/403.vue'),
+    meta: { title: '403' },
+  },
+  {
+    path: '/404',
+    name: 'NotFound',
+    component: () => import('@/views/exception/404.vue'),
+    meta: { title: '404' },
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/404',
+  },
+]
+
+const router = createRouter({
+  history: <%- options.routerMode === 'hash' ? 'createWebHashHistory()' : "createWebHistory(import.meta.env.BASE_URL)" %>,
+  routes,
+})
+
+// 设置路由守卫
+setupBeforeEachGuard(router)
+
+export default router

package/template/auth-art/src/store/modules/user.ts

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+export const useUserStore = defineStore(
+  'userStore',
+  () => {
+    const router = useRouter()
+
+    const isLogin = ref(false)
+    const accessToken = ref('')
+    const refreshToken = ref('')
+    const info = ref<Record<string, any>>({})
+
+    const getUserInfo = computed(() => info.value)
+
+    function setUserInfo(newInfo: Record<string, any>) {
+      info.value = newInfo
+    }
+
+    function setLoginStatus(status: boolean) {
+      isLogin.value = status
+    }
+
+    function setToken(newAccessToken: string, newRefreshToken?: string) {
+      accessToken.value = newAccessToken
+      if (newRefreshToken) {
+        refreshToken.value = newRefreshToken
+      }
+    }
+
+    function logOut() {
+      info.value = {}
+      isLogin.value = false
+      accessToken.value = ''
+      refreshToken.value = ''
+
+      const currentRoute = router.currentRoute.value
+      const redirect = currentRoute.path !== '/login' ? currentRoute.fullPath : undefined
+      router.push({
+        path: '/login',
+        query: redirect ? { redirect } : undefined,
+      })
+    }
+
+    return {
+      isLogin,
+      accessToken,
+      refreshToken,
+      info,
+      getUserInfo,
+      setUserInfo,
+      setLoginStatus,
+      setToken,
+      logOut,
+    }
+  },
+  {
+    persist: {
+      key: 'user',
+      storage: localStorage,
+    },
+  },
+)

package/template/auth-art/src/utils/http/index.ts

@@ -0,0 +1,60 @@
+import type { AxiosRequestConfig } from 'axios'
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/store/modules/user'
+
+const http = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '',
+  timeout: 30000,
+})
+
+// 请求拦截器：注入 token
+http.interceptors.request.use(
+  (config) => {
+    const userStore = useUserStore()
+    if (userStore.accessToken) {
+      config.headers.Authorization = `Bearer ${userStore.accessToken}`
+    }
+    return config
+  },
+  error => Promise.reject(error),
+)
+
+// 响应拦截器：处理 401 和业务错误
+http.interceptors.response.use(
+  (response) => {
+    return response.data
+  },
+  (error) => {
+    if (error.response?.status === 401) {
+      const userStore = useUserStore()
+      userStore.logOut()
+      return Promise.reject(error)
+    }
+    const message = error.response?.data?.message || error.message || '请求失败'
+    ElMessage.error(message)
+    return Promise.reject(error)
+  },
+)
+
+interface RequestConfig extends AxiosRequestConfig {
+  url: string
+  params?: any
+}
+
+const request = {
+  get<T>(config: RequestConfig): Promise<T> {
+    return http.get(config.url, { params: config.params, ...config }) as unknown as Promise<T>
+  },
+  post<T>(config: RequestConfig): Promise<T> {
+    return http.post(config.url, config.params, config) as unknown as Promise<T>
+  },
+  put<T>(config: RequestConfig): Promise<T> {
+    return http.put(config.url, config.params, config) as unknown as Promise<T>
+  },
+  delete<T>(config: RequestConfig): Promise<T> {
+    return http.delete(config.url, { params: config.params, ...config }) as unknown as Promise<T>
+  },
+}
+
+export default request

package/template/auth-art/src/views/auth/login/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <div class="login-header">
+        <h2 class="login-title">欢迎登录</h2>
+        <p class="login-subtitle">请输入您的账号和密码</p>
+      </div>
+
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        class="login-form"
+        @keyup.enter="handleSubmit"
+      >
+        <el-form-item prop="username">
+          <el-input
+            v-model.trim="formData.username"
+            placeholder="请输入用户名"
+            size="large"
+            :prefix-icon="User"
+          />
+        </el-form-item>
+
+        <el-form-item prop="password">
+          <el-input
+            v-model.trim="formData.password"
+            placeholder="请输入密码"
+            type="password"
+            size="large"
+            show-password
+            :prefix-icon="Lock"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <div class="login-options">
+            <el-checkbox v-model="formData.rememberPassword">记住密码</el-checkbox>
+          </div>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            class="login-button"
+            :loading="loading"
+            @click="handleSubmit"
+          >
+            登录
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { User, Lock } from '@element-plus/icons-vue'
+import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
+import { useUserStore } from '@/store/modules/user'
+import { fetchLogin } from '@/api/auth'
+
+defineOptions({ name: 'Login' })
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+const formRef = ref<FormInstance>()
+const loading = ref(false)
+
+const formData = reactive({
+  username: '',
+  password: '',
+  rememberPassword: true,
+})
+
+const rules: FormRules = {
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+}
+
+async function handleSubmit() {
+  if (!formRef.value) return
+
+  const valid = await formRef.value.validate().catch(() => false)
+  if (!valid) return
+
+  loading.value = true
+
+  try {
+    const { token, refreshToken } = await fetchLogin({
+      userName: formData.username,
+      password: formData.password,
+    })
+
+    if (!token) {
+      throw new Error('登录失败：未获取到 token')
+    }
+
+    userStore.setToken(token, refreshToken)
+    userStore.setLoginStatus(true)
+
+    ElNotification({
+      title: '登录成功',
+      type: 'success',
+      duration: 2500,
+      message: '欢迎回来！',
+    })
+
+    const redirect = route.query.redirect as string
+    router.push(redirect || '/')
+  } catch (error: any) {
+    ElNotification({
+      title: '登录失败',
+      type: 'error',
+      duration: 3000,
+      message: error.message || '请检查用户名和密码',
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.login-card {
+  width: 400px;
+  padding: 40px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.login-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: #999;
+}
+
+.login-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.login-button {
+  width: 100%;
+}
+</style>

package/template/auth-zhihuishu/_env.development

@@ -0,0 +1,5 @@
+# 认证模式：dev-token（开发）/ cas（生产，需部署在 *.zhihuishu.com 下）
+VITE_AUTH_MODE=dev-token
+
+# API 基础地址
+VITE_API_BASE_URL=http://localhost:3000

package/template/auth-zhihuishu/_env.local.example

@@ -0,0 +1,5 @@
+# 本地开发 token，可填写纯 token 或 Bearer xxx
+VITE_DEV_TOKEN=
+
+# 本地开发用户 UID（对应后端 user_uid）
+VITE_DEV_USER_UID=

package/template/auth-zhihuishu/src/constants/auth.ts

@@ -0,0 +1,10 @@
+export const casCookieName = 'CASLOGC'
+export const casTicketCookieName = 'CASTGC'
+export const zhihuishuCASLoginUrl = 'https://passport.zhihuishu.com/login?source=20&service='
+
+export const authStorageKeys = {
+  token: 'auth_token',
+  userInfo: 'user_info',
+  expiresAt: 'auth_token_expires_at',
+  mode: 'auth_mode',
+} as const

package/template/auth-zhihuishu/src/router/guards/beforeEach.ts

@@ -0,0 +1,47 @@
+import type { Router } from 'vue-router'
+import NProgress from 'nprogress'
+import { useAuthStore } from '@/store/modules/auth'
+import { isDevTokenAuthMode, isZhihuishuDomain } from '@/utils/auth'
+
+/**
+ * 设置路由前置守卫（智慧树 CAS + dev-token 双模式）
+ */
+export function setupBeforeEachGuard(router: Router): void {
+  router.beforeEach(async (to) => {
+    NProgress.start()
+
+    const authStore = useAuthStore()
+
+    // 错误页直接放行
+    if (to.name === 'Forbidden' || to.name === 'NotFound') {
+      return true
+    }
+
+    // dev-token 模式
+    if (isDevTokenAuthMode()) {
+      const success = await authStore.autoLogin()
+      if (!success) {
+        return { path: '/403', replace: true }
+      }
+      return true
+    }
+
+    // CAS 模式：需要在智慧树域名下运行
+    if (!isZhihuishuDomain()) {
+      authStore.logout(to.fullPath)
+      return false
+    }
+
+    const success = await authStore.autoLogin()
+    if (!success) {
+      authStore.logout(to.fullPath)
+      return false
+    }
+
+    return true
+  })
+
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}

package/template/auth-zhihuishu/src/router/index.ts.ejs

@@ -0,0 +1,46 @@
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { setupBeforeEachGuard } from './guards/beforeEach'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Layout',
+    component: () => import('@/views/index/index.vue'),
+    redirect: '/dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        name: 'Dashboard',
+        component: () => import('@/views/dashboard/index.vue'),
+        meta: { title: '仪表盘', icon: 'ep:home-filled' },
+      },
+    ],
+  },
+  {
+    path: '/403',
+    name: 'Forbidden',
+    component: () => import('@/views/exception/403.vue'),
+    meta: { title: '403' },
+  },
+  {
+    path: '/404',
+    name: 'NotFound',
+    component: () => import('@/views/exception/404.vue'),
+    meta: { title: '404' },
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/404',
+  },
+]
+
+const router = createRouter({
+  history: <%- options.routerMode === 'hash' ? 'createWebHashHistory()' : "createWebHistory(import.meta.env.BASE_URL)" %>,
+  routes,
+})
+
+// 设置路由守卫（CAS + dev-token 双模式）
+setupBeforeEachGuard(router)
+
+export default router

package/template/auth-zhihuishu/src/services/authService.ts

@@ -0,0 +1,55 @@
+import type {
+  AuthLoginData,
+  AuthLoginParams,
+  AuthLoginResponseData,
+  AuthLoginResponsePayload,
+} from '@/types/auth'
+import axios from 'axios'
+
+const authService = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '',
+  timeout: 30000,
+})
+
+export class AuthServiceError extends Error {
+  code?: number
+
+  constructor(message: string, code?: number) {
+    super(message)
+    this.name = 'AuthServiceError'
+    this.code = code
+  }
+}
+
+/**
+ * 从登录响应中提取 token 与用户信息
+ */
+function resolveLoginData(payload: AuthLoginResponsePayload, fallbackUserUid: string): AuthLoginData {
+  const responseData: AuthLoginResponseData = payload.data ?? payload
+
+  if (!responseData.token) {
+    throw new AuthServiceError(payload.message || '登录响应缺少 token', payload.code)
+  }
+
+  return {
+    token: responseData.token,
+    userUid: responseData.user_uid === undefined ? fallbackUserUid : String(responseData.user_uid),
+    name: responseData.name?.trim() || fallbackUserUid,
+    expiresIn: responseData.expires_in,
+    isSuperAdmin: responseData.is_super_admin ?? false,
+  }
+}
+
+/**
+ * 使用 CASLOGC 中的用户 ID 换取业务 token
+ */
+export async function loginWithCasUser(params: AuthLoginParams): Promise<AuthLoginData> {
+  const response = await authService.post<AuthLoginResponsePayload>('/auth/login', params)
+  const payload = response.data
+
+  if (typeof payload.code === 'number' && payload.code !== 200) {
+    throw new AuthServiceError(payload.message || '登录失败', payload.code)
+  }
+
+  return resolveLoginData(payload, params.user_uid)
+}