fix : change Spring WebConfig

src/main/java/com/io/realworld/security/WebConfig.java

@@ -38,27 +38,19 @@ public class WebConfig {
     }
 
     @Bean
-    @Order(0)
+    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
-    public SecurityFilterChain resources(HttpSecurity http) throws Exception {
+        http.csrf()
-        http.csrf().disable()
+                .disable()
-                .requestMatchers((matchers) -> {matchers.antMatchers("/h2-console/**");
+                .requestMatchers((matchers) -> {
-                    matchers.antMatchers(HttpMethod.GET,"/api/articles/**","/**");})
+                    matchers.antMatchers("/h2-console/**");
+                    matchers.antMatchers(HttpMethod.GET,"/api/articles/**","/**");
+                    matchers.mvcMatchers("/api/users/**");
+                })
                 .authorizeHttpRequests((authorize) -> authorize.anyRequest().permitAll())
                 .requestCache().disable()
                 .securityContext().disable()
                 .sessionManagement().disable()
-                .headers().frameOptions().disable();
+                .headers().frameOptions().disable()
-
-        return http.build();
-    }
-
-    @Bean
-    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
-        http.csrf()
-                .disable()
-                .authorizeRequests()
-                .mvcMatchers("/api/users/**").permitAll()
-                .anyRequest().authenticated()
                 .and()
                 .formLogin()
                 .disable()

src/vite-frontend/src/components/ArticleListFeed.vue

@@ -52,6 +52,7 @@ export default defineComponent({
     })
 
     onMounted(() => {
+
       axios.get(url + "/api/articles/feed",{
         headers:{
           Authorization : "TOKEN " + token

src/vite-frontend/src/components/ArticleListGlobal.vue

@@ -13,7 +13,9 @@
           <i class="ion-heart"></i> {{art.favoritesCount}}
         </button>
       </div>
-      <a href="" class="preview-link">
+      <a href="javascript:(0)"
+         class="preview-link"
+         @click="showArticle(art.slug)">
         <h1>{{art.title}}</h1>
         <p>{{art.description}}</p>
         <span>Read more...</span>
@@ -23,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, ref, defineComponent} from "vue";
+import {onMounted, reactive, ref, defineComponent, watch} from "vue";
 import axios from "axios";
 import router from "@/router";
 
@@ -31,7 +33,8 @@ export default defineComponent({
   name: "ArticleListGlobal",
   props:{
     isEmpty: Boolean,
-    isLoading: Boolean
+    isLoading: Boolean,
+    globalList: Boolean,
   },
   setup(props,{emit}) {
     const url = import.meta.env.VITE_BASE_URL;
@@ -53,14 +56,7 @@ export default defineComponent({
       articlesCount: "",
     })
 
-    const showProfile = (username: string) => {
+    const getArticles = () => {
-      router.push({
-        name: 'Profile',
-        params: {username: username}
-      })
-    }
-
-    onMounted(() => {
       axios.get(url + "/api/articles")
           .then(response => {
             articles.article = response.data.articles;
@@ -71,8 +67,26 @@ export default defineComponent({
               emit("emptied", true);
             }
           });
+    }
+
+    const showProfile = (username: string) => {
+      router.push({
+        name: 'Profile',
+        params: {username: username}
       })
-    return { articles, showProfile }
+    }
+
+    const showArticle = (slug: string) =>{
+      router.push({
+        name: 'ArticleDetail',
+        params: {slug: slug}
+      })
+    }
+
+    onMounted(() => {
+      getArticles();
+    })
+    return { articles, getArticles, showProfile, showArticle }
   }
 })
 </script>

src/vite-frontend/src/views/TheHome.vue

@@ -46,7 +46,6 @@
                 :value2="isEmpty"
                 @loading="onChangeLoading"
                 @emptied="emptyCheck">
-
               </article-list-global>
           </div>
         <div class="col-md-3">
@@ -67,7 +66,7 @@
 import articleList from '@/components/ArticleListFeed.vue'
 import articleListGlobal from "@/components/ArticleListGlobal.vue";
 import tagLists from "@/components/TagList.vue";
-import {ref} from "vue";
+import {ref, getCurrentInstance, onMounted} from "vue";
 import {useStore} from "vuex";
 export default {
   name: "TheHome",
@@ -91,6 +90,7 @@ export default {
       isEmpty.value = val;
     }
 
+
     const feedSelect = () => {
       feedActive.value=true;
       globalActive.value=false;