.4062073974432528:453d98bd45139061925af4076ed7405f_69e873201ffbb16c7ee08e99.69e877081ffbb16c7ee08ee1.69e87708e09018824de9164a:Trae CN.T(2026/4/22 15:21:44)

backend/src/main/java/de/jonashackt/springbootvuejs/configuration/WebSecurityConfiguration.java

@@ -28,9 +28,9 @@ protected void configure(HttpSecurity http) throws Exception {
             .csrf().disable(); // disable cross site request forgery, as we don't use cookies - otherwise ALL PUT, POST, DELETE will get HTTP 403!
     }
 
-    //@Override
-    //protected void configure(AuthenticationManagerBuilder auth) throws Exception {
-    //    auth.inMemoryAuthentication()
-    //            .withUser("foo").password("{noop}bar").roles("USER");
-    //}
+    @Override
+    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
+        auth.inMemoryAuthentication()
+                .withUser("admin").password("{noop}admin").roles("USER");
+    }
 }

backend/src/test/java/de/jonashackt/springbootvuejs/controller/BackendControllerTest.java

@@ -95,7 +95,7 @@ public void secured_api_should_react_with_unauthorized_per_default() {
 	public void secured_api_should_give_http_200_when_authorized() {
 
 		given()
-			.auth().basic("sina", "miller")
+			.auth().basic("admin", "admin")
 		.when()
 			.get("/api/secured")
 		.then()
@@ -104,4 +104,26 @@ public void secured_api_should_give_http_200_when_authorized() {
 				.body(is(equalTo(BackendController.SECURED_TEXT)));
 	}
 
+	@Test
+	public void secured_api_should_react_with_unauthorized_when_using_wrong_password() {
+
+		given()
+			.auth().basic("admin", "wrongpassword")
+		.when()
+			.get("/api/secured")
+		.then()
+			.statusCode(HttpStatus.SC_UNAUTHORIZED);
+	}
+
+	@Test
+	public void secured_api_should_react_with_unauthorized_when_using_non_existing_user() {
+
+		given()
+			.auth().basic("nonuser", "anypassword")
+		.when()
+			.get("/api/secured")
+		.then()
+			.statusCode(HttpStatus.SC_UNAUTHORIZED);
+	}
+
 }

frontend/src/components/HelloSpringWorld.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="hello">
-    <h1>{{ hellomsg }}</h1>
+    <h1>{{ internalMsg }}</h1>
+    <div class="refresh-section">
+      <button class="btn btn-primary" @click="refreshData" :disabled="loading">
+        {{ loading ? '加载中...' : '刷新数据' }}
+      </button>
+    </div>
     <h2>See the sources here: </h2>
     <ul>
       <li><a href="https://github.com/jonashackt/spring-boot-vuejs" target="_blank">github.com/jonashackt/spring-boot-vuejs</a></li>
@@ -21,15 +26,49 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue';
+import api from '@/api/backend-api';
+
+export default defineComponent({
   name: 'HelloSpringWorld',
   props: {
     hellomsg: {
       type: String,
-      required: true }
+      default: 'Welcome to your Vue.js (+ TypeScript) powered Spring Boot App'
+    }
+  },
+  data() {
+    return {
+      internalMsg: this.hellomsg,
+      loading: false
+    };
+  },
+  watch: {
+    hellomsg(newVal) {
+      this.internalMsg = newVal;
+    }
+  },
+  mounted() {
+    this.refreshData();
+  },
+  methods: {
+    async refreshData() {
+      if (this.loading) return;
+
+      this.loading = true;
+      try {
+        const response = await api.hello();
+        this.internalMsg = response.data;
+      } catch (error) {
+        console.error('Failed to refresh data:', error);
+        this.internalMsg = '获取数据失败，请稍后重试';
+      } finally {
+        this.loading = false;
+      }
+    }
   }
-}
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -51,4 +90,8 @@ li {
 a {
   color: #42b983;
 }
-</style>
+
+.refresh-section {
+  margin-bottom: 20px;
+}
+</style>

frontend/src/views/Home.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="home">
     <img alt="Vue with Spring logo" src="../assets/spring-boot-vuejs-logo.png">
-    <HelloSpringWorld hellomsg="Welcome to your Vue.js (+ TypeScript) powered Spring Boot App"/>
+    <HelloSpringWorld/>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import HelloSpringWorld from '@/components/HelloSpringWorld.vue'; // @ is an alias to /src
+import HelloSpringWorld from '@/components/HelloSpringWorld.vue';
 
 export default defineComponent({
   name: 'Home',