diff --git a/docs/AUTH_API_REQUIREMENTS.md b/docs/AUTH_API_REQUIREMENTS.md
new file mode 100644
index 0000000..ac7af5e
--- /dev/null
+++ b/docs/AUTH_API_REQUIREMENTS.md
@@ -0,0 +1,17 @@
+# 用户系统与角色权限：前后端接口清单
+
+当前后端未注册认证或管理员路由；前端只提供真实请求封装，任何 404、401、403 或 5xx 都会如实抛出，绝不创建本地假身份。
+
+| 目标接口 | 方法 | 前端用途 | 后端待实现要求 |
+|---|---:|---|---|
+| `/api/auth/register` | POST | 注册 | 只创建 `user`；不得接受角色字段 |
+| `/api/auth/login` | POST | 登录 | 建立 HttpOnly、Secure、SameSite Cookie 会话 |
+| `/api/auth/logout` | POST | 退出 | 作废会话并清除 Cookie |
+| `/api/auth/me` | GET | 刷新恢复会话 | 返回用户资料与 `user`/`admin` 角色 |
+| `/api/users/me` | PATCH | 修改昵称/邮箱 | 只允许修改当前用户自己的基本资料 |
+| `/api/auth/change-password` | POST | 修改密码 | 验证旧密码并进行安全哈希 |
+| `/api/admin/users` | GET | 用户管理 | 必须由后端校验 `admin` 角色 |
+
+## 前端待接入条件
+
+现有工程尚未安装 `vue-router`。在用户安装该依赖并确认认证接口可用后，前端将接入路由守卫：未登录跳转登录页、成功后回跳、管理员路由额外检查 `role === 'admin'`。前端只用于体验层控制；知识库、来源、实验、用户管理的最终授权必须由 FastAPI 校验。
diff --git a/frontend/src/services/auth.ts b/frontend/src/services/auth.ts
new file mode 100644
index 0000000..9d0cd4a
--- /dev/null
+++ b/frontend/src/services/auth.ts
@@ -0,0 +1,26 @@
+import type { ChangePasswordPayload, CurrentUser, LoginPayload, RegisterPayload, UpdateProfilePayload } from '../types/auth'
+
+export class AuthApiUnavailableError extends Error {
+  constructor(public readonly status: number, message: string) { super(message) }
+}
+
+async function authRequest<T>(path: string, init: RequestInit = {}): Promise<T> {
+  const response = await fetch(path, {
+    credentials: 'include',
+    headers: { Accept: 'application/json', 'Content-Type': 'application/json', ...init.headers },
+    ...init,
+  })
+  if (!response.ok) {
+    const body = await response.json().catch(() => null)
+    throw new AuthApiUnavailableError(response.status, body?.detail || `认证请求失败（${response.status}）`)
+  }
+  return response.status === 204 ? undefined as T : response.json() as Promise<T>
+}
+
+export const register = (payload: RegisterPayload) => authRequest<CurrentUser>('/api/auth/register', { method: 'POST', body: JSON.stringify(payload) })
+export const login = (payload: LoginPayload) => authRequest<CurrentUser>('/api/auth/login', { method: 'POST', body: JSON.stringify(payload) })
+export const logout = () => authRequest<void>('/api/auth/logout', { method: 'POST' })
+export const getCurrentUser = () => authRequest<CurrentUser>('/api/auth/me')
+export const updateMyProfile = (payload: UpdateProfilePayload) => authRequest<CurrentUser>('/api/users/me', { method: 'PATCH', body: JSON.stringify(payload) })
+export const changePassword = (payload: ChangePasswordPayload) => authRequest<void>('/api/auth/change-password', { method: 'POST', body: JSON.stringify(payload) })
+export const getUsers = () => authRequest<CurrentUser[]>('/api/admin/users')
diff --git a/frontend/src/types/auth.ts b/frontend/src/types/auth.ts
new file mode 100644
index 0000000..9979d31
--- /dev/null
+++ b/frontend/src/types/auth.ts
@@ -0,0 +1,16 @@
+export type UserRole = 'user' | 'admin'
+
+export type CurrentUser = {
+  id: number
+  username: string
+  nickname: string | null
+  email: string | null
+  role: UserRole
+  created_at?: string
+  conversation_count?: number
+}
+
+export type RegisterPayload = { username: string; password: string; email?: string; nickname?: string }
+export type LoginPayload = { username: string; password: string }
+export type UpdateProfilePayload = { nickname?: string; email?: string }
+export type ChangePasswordPayload = { current_password: string; new_password: string }
diff --git a/frontend/src/views/AccountSettingsView.vue b/frontend/src/views/AccountSettingsView.vue
new file mode 100644
index 0000000..825440c
--- /dev/null
+++ b/frontend/src/views/AccountSettingsView.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { changePassword, updateMyProfile } from '../services/auth'
+const nickname=ref(''), email=ref(''), currentPassword=ref(''), newPassword=ref(''), notice=ref(''), error=ref('')
+async function saveProfile(){try{await updateMyProfile({nickname:nickname.value||undefined,email:email.value||undefined});notice.value='资料已更新。'}catch(e){error.value=e instanceof Error?e.message:'更新失败'}}
+async function savePassword(){try{if(newPassword.value.length<8)throw new Error('新密码至少 8 位。');await changePassword({current_password:currentPassword.value,new_password:newPassword.value});notice.value='密码已更新。'}catch(e){error.value=e instanceof Error?e.message:'修改失败'}}
+</script>
+<template><main><h1>账户设置</h1><p v-if="notice">{{notice}}</p><p v-if="error">{{error}}</p><form @submit.prevent="saveProfile"><input v-model.trim="nickname" placeholder="昵称"/><input v-model.trim="email" type="email" placeholder="邮箱"/><button>保存资料</button></form><form @submit.prevent="savePassword"><input v-model="currentPassword" type="password" placeholder="当前密码"/><input v-model="newPassword" type="password" placeholder="新密码"/><button>修改密码</button></form></main></template>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
new file mode 100644
index 0000000..da2fcdf
--- /dev/null
+++ b/frontend/src/views/LoginView.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { login } from '../services/auth'
+const username=ref(''), password=ref(''), error=ref(''), loading=ref(false)
+async function submit(){error.value='';if(!username.value||!password.value){error.value='请输入用户名和密码。';return}loading.value=true;try{await login({username:username.value,password:password.value})}catch(e){error.value=e instanceof Error?e.message:'登录失败'}finally{loading.value=false}}
+</script>
+<template><main><h1>登录</h1><form @submit.prevent="submit"><input v-model.trim="username" autocomplete="username" placeholder="用户名"/><input v-model="password" type="password" autocomplete="current-password" placeholder="密码"/><p v-if="error">{{error}}</p><button :disabled="loading">{{loading?'登录中…':'登录'}}</button></form></main></template>
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
new file mode 100644
index 0000000..5aca313
--- /dev/null
+++ b/frontend/src/views/ProfileView.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getCurrentUser, logout } from '../services/auth'
+import type { CurrentUser } from '../types/auth'
+const user=ref<CurrentUser|null>(null), error=ref('')
+onMounted(async()=>{try{user.value=await getCurrentUser()}catch(e){error.value=e instanceof Error?e.message:'无法读取个人资料'}})
+</script>
+<template><main><h1>个人中心</h1><p v-if="error">{{error}}</p><dl v-else-if="user"><dt>用户名</dt><dd>{{user.username}}</dd><dt>昵称</dt><dd>{{user.nickname||'未设置'}}</dd><dt>邮箱</dt><dd>{{user.email||'未设置'}}</dd><dt>角色</dt><dd>{{user.role}}</dd></dl><button @click="logout">退出登录</button></main></template>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
new file mode 100644
index 0000000..2abc046
--- /dev/null
+++ b/frontend/src/views/RegisterView.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { register } from '../services/auth'
+const username=ref(''), password=ref(''), email=ref(''), error=ref('')
+async function submit(){error.value='';if(username.value.length<3||password.value.length<8){error.value='用户名至少 3 位，密码至少 8 位。';return}try{await register({username:username.value,password:password.value,email:email.value||undefined})}catch(e){error.value=e instanceof Error?e.message:'注册失败'}}
+</script>
+<template><main><h1>注册</h1><form @submit.prevent="submit"><input v-model.trim="username" placeholder="用户名"/><input v-model.trim="email" type="email" placeholder="邮箱（可选）"/><input v-model="password" type="password" placeholder="密码"/><p v-if="error">{{error}}</p><button>创建账户</button></form></main></template>
diff --git a/frontend/src/views/UserManagementView.vue b/frontend/src/views/UserManagementView.vue
new file mode 100644
index 0000000..96987c9
--- /dev/null
+++ b/frontend/src/views/UserManagementView.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { getUsers } from '../services/auth'
+import type { CurrentUser } from '../types/auth'
+const users=ref<CurrentUser[]>([]), error=ref('')
+onMounted(async()=>{try{users.value=await getUsers()}catch(e){error.value=e instanceof Error?e.message:'无权读取用户列表'}})
+</script>
+<template><main><h1>用户管理</h1><p v-if="error">{{error}}</p><table v-else><tr><th>用户名</th><th>昵称</th><th>邮箱</th><th>角色</th></tr><tr v-for="user in users" :key="user.id"><td>{{user.username}}</td><td>{{user.nickname}}</td><td>{{user.email}}</td><td>{{user.role}}</td></tr></table></main></template>