修改配置文件，增加登录注册功能

Author: yqz

.cursor/rules/rule.mdc

@@ -8,4 +8,10 @@ alwaysApply: true
 
 
 后端规则：
+后端代码修改只修改要求的内容，不要做任何额外修改和处理
 
+
+项目设计：
+后端语言为java
+主框架为Springboot
+orm框架使用mybatis-plus

.github/workflows/ci.yml

@@ -42,19 +42,19 @@ jobs:
         with:
           node-version: "22"
           cache: "npm"
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: vue/package-lock.json
 
       - name: Install frontend dependencies and build
-        working-directory: frontend
+        working-directory: vue
         run: |
           npm ci
           npm run build
 
       - name: Prepare release bundle for server
         run: |
           mkdir -p release
-          cp -r frontend/dist release/dist
-          cp frontend/Dockerfile frontend/docker.sh frontend/nginx.conf release/
+          cp -r vue/dist release/dist
+          cp vue/Dockerfile vue/docker.sh vue/nginx.conf release/
 
       - name: Deploy files to server
         uses: easingthemes/ssh-deploy@v5.1.1

src/main/java/com/yqz/openblog/article/controller/ArticleController.java

@@ -13,7 +13,7 @@
 
 import jakarta.validation.Valid;
 
-
+import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.*;
 import jakarta.servlet.http.HttpServletRequest;
 
@@ -45,40 +45,46 @@ public ApiResponse<ArticleDetailResponse> detailPublished(@PathVariable("article
     }
 
     @PostMapping("/articles")
+    @PreAuthorize("hasAnyRole('ADMIN','AUTHOR')")
     public ApiResponse<ArticleListItemResponse> createDraft(@RequestBody @Valid ArticleCreateRequest req) {
         Long uid = currentUser.userId();
         return ApiResponse.ok(articleService.createDraft(uid, req));
     }
 
     @PutMapping("/articles/{articleId}")
+    @PreAuthorize("hasAnyRole('ADMIN','AUTHOR')")
     public ApiResponse<ArticleListItemResponse> updateArticle(@PathVariable("articleId") Long articleId,
                                                                @RequestBody @Valid ArticleUpdateRequest req) {
         Long uid = currentUser.userId();
         return ApiResponse.ok(articleService.updateArticle(uid, articleId, req));
     }
 
     @PostMapping("/articles/{articleId}/publish")
+    @PreAuthorize("hasAnyRole('ADMIN','AUTHOR')")
     public ApiResponse<ArticleListItemResponse> submitForReview(@PathVariable("articleId") Long articleId,
                                                                 @RequestBody(required = false) ArticlePublishRequest req) {
         Long uid = currentUser.userId();
         return ApiResponse.ok(articleService.publish(uid, articleId, req == null ? null : req.getPublishedAt()));
     }
 
     @PostMapping("/articles/{articleId}/unpublish")
+    @PreAuthorize("hasAnyRole('ADMIN','AUTHOR')")
     public ApiResponse<Void> unpublish(@PathVariable("articleId") Long articleId) {
         Long uid = currentUser.userId();
         articleService.unpublishOrDelete(uid, articleId);
         return ApiResponse.ok();
     }
 
     @DeleteMapping("/articles/{articleId}")
+    @PreAuthorize("hasAnyRole('ADMIN','AUTHOR')")
     public ApiResponse<Void> deleteArticle(@PathVariable("articleId") Long articleId) {
         Long uid = currentUser.userId();
         articleService.unpublishOrDelete(uid, articleId);
         return ApiResponse.ok();
     }
 
     @GetMapping("/users/me/articles")
+    @PreAuthorize("hasAnyRole('ADMIN','AUTHOR')")
     public ApiResponse<PageResult<ArticleListItemResponse>> listMine(
             @RequestParam(defaultValue = "0") int page,
             @RequestParam(defaultValue = "20") int size) {
@@ -87,6 +93,7 @@ public ApiResponse<PageResult<ArticleListItemResponse>> listMine(
     }
 
     @GetMapping("/users/me/articles/{articleId}")
+    @PreAuthorize("hasAnyRole('ADMIN','AUTHOR')")
     public ApiResponse<ArticleDetailResponse> detailMine(@PathVariable("articleId") Long articleId,
                                                           HttpServletRequest request) {
         Long uid = currentUser.userId();

src/main/java/com/yqz/openblog/user/service/AuthService.java

@@ -76,8 +76,8 @@ public void register(RegisterRequest req) {
         user.setEmail(req.getEmail());
         user.setPasswordHash(passwordEncoder.encode(req.getPassword()));
         user.setNickname(req.getNickname());
-        // 个人博客模式：默认作者角色（无审核/无管理员审核流程）
-        user.setRole(UserRole.AUTHOR);
+        // 前台自助注册：读者账号（与管理员/作者在库中共存；控制台与发文权限见接口鉴权）
+        user.setRole(UserRole.READER);
         user.setStatus("ACTIVE");
         userMapper.insert(user);
     }

vue/src/api/admin.js

@@ -7,6 +7,18 @@ export function login(account, password) {
   })
 }
 
+/** 前台会员注册（与控制台管理员登录入口分离） */
+export function register(payload) {
+  const { username, email, password, nickname } = payload
+  const body = { username, email, password }
+  const nick = typeof nickname === 'string' ? nickname.trim() : ''
+  if (nick) body.nickname = nick
+  return request('/api/v1/auth/register', {
+    method: 'POST',
+    body: JSON.stringify(body)
+  })
+}
+
 export function fetchMe() {
   return request('/api/v1/users/me', { method: 'GET', withAuth: true })
 }

vue/src/assets/blog.css

@@ -1880,6 +1880,93 @@ body {
   font: inherit;
 }
 
+.site-nav-auth {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 6px;
+  padding-left: 14px;
+  border-left: 1px solid var(--border);
+}
+
+.site-nav-user-name {
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--text);
+  max-width: 112px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.site-nav-pill-outline,
+.site-nav-pill-solid {
+  border-radius: 999px;
+  padding: 6px 14px;
+  text-decoration: none;
+}
+
+.site-nav-pill-outline {
+  border: 1px solid var(--border);
+  color: var(--muted);
+}
+
+.site-nav-pill-outline:hover {
+  color: var(--text);
+  border-color: rgba(0, 0, 0, 0.14);
+}
+
+[data-theme='dark'] .site-nav-pill-outline:hover {
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.site-nav-pill-solid {
+  border: 1px solid rgba(170, 59, 255, 0.45);
+  background: rgba(170, 59, 255, 0.1);
+  color: var(--text);
+  font-weight: 650;
+}
+
+.site-nav-pill-solid:hover {
+  border-color: rgba(170, 59, 255, 0.65);
+  background: rgba(170, 59, 255, 0.14);
+}
+
+.site-auth-card .site-auth-title {
+  font-weight: 1000;
+  font-size: 22px;
+  margin-bottom: 8px;
+}
+
+.site-auth-lead {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.55;
+  margin-bottom: 18px;
+}
+
+.site-auth-footer {
+  margin-top: 18px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.site-auth-link {
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 650;
+}
+
+.site-auth-link:hover {
+  color: var(--text);
+}
+
+.site-auth-dot {
+  margin: 0 6px;
+  opacity: 0.55;
+}
+
 .site-nav-widgets-btn {
   display: inline-flex;
   align-items: center;
@@ -2083,7 +2170,7 @@ body {
   .site-nav {
     gap: 12px;
   }
-  .site-nav-link:nth-child(4) {
+  .site-nav-link-sm-hide {
     display: none;
   }
 }

vue/src/auth/session.js

@@ -47,3 +47,18 @@ export function isConsoleSessionValid() {
   if (!token || !isLikelyJwt(token) || isJwtExpired(token)) return false
   return true
 }
+
+/** JWT payload 中的 role（ADMIN / AUTHOR / READER） */
+export function getAccessTokenRole() {
+  const token = getStoredAccessToken()
+  if (!token) return null
+  const payload = parseJwtPayload(token)
+  const r = payload?.role
+  return typeof r === 'string' ? r : null
+}
+
+/** 是否可进入 /console（与后台发文能力一致） */
+export function canAccessConsole() {
+  const r = getAccessTokenRole()
+  return r === 'ADMIN' || r === 'AUTHOR'
+}

vue/src/components/BlogHeader.vue

@@ -35,7 +35,25 @@
           问题反馈
         </router-link>
 
-        <a class="site-nav-link" href="https://github.com/yyyCode/OpenBlog.git" target="_blank" rel="noopener noreferrer">
+        <div class="site-nav-auth" aria-label="账户">
+          <template v-if="me">
+            <span class="site-nav-user-name" :title="displayName">{{ displayName }}</span>
+            <button type="button" class="site-nav-link site-nav-link-btn site-nav-pill-outline" @click="logout">
+              退出
+            </button>
+          </template>
+          <template v-else>
+            <router-link to="/login" class="site-nav-link site-nav-pill-outline">登录</router-link>
+            <router-link to="/register" class="site-nav-link site-nav-pill-solid">注册</router-link>
+          </template>
+        </div>
+
+        <a
+          class="site-nav-link site-nav-link-sm-hide"
+          href="https://github.com/yyyCode/OpenBlog.git"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <span class="site-nav-ico" aria-hidden="true">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
               <path
@@ -61,20 +79,69 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { toggleTheme as applyToggle } from '../theme'
+import { fetchMe } from '../api/admin'
+import { clearAuth, getStoredAccessToken, isJwtExpired, isLikelyJwt } from '../auth/session'
+
 defineEmits(['toggle-widgets'])
 
+const route = useRoute()
+const router = useRouter()
 const isDark = ref(false)
+const me = ref(null)
+
+const displayName = computed(() => {
+  const m = me.value
+  if (!m) return ''
+  const n = (m.nickname || '').trim()
+  return n || m.username || '用户'
+})
+
+function tokenLooksValid() {
+  const t = getStoredAccessToken()
+  return Boolean(t && isLikelyJwt(t) && !isJwtExpired(t))
+}
+
+async function loadMe() {
+  if (!tokenLooksValid()) {
+    me.value = null
+    return
+  }
+  try {
+    me.value = await fetchMe()
+  } catch {
+    me.value = null
+  }
+}
+
+watch(
+  () => route.fullPath,
+  () => {
+    loadMe()
+  }
+)
 
 function sync() {
   isDark.value = document.documentElement.getAttribute('data-theme') === 'dark'
 }
 
 onMounted(() => {
   sync()
+  loadMe()
 })
 
+function logout() {
+  clearAuth()
+  me.value = null
+  if (route.path.startsWith('/console')) {
+    router.push('/console/login')
+  } else {
+    router.push('/')
+  }
+}
+
 function onToggle() {
   applyToggle()
   sync()