继续完善登录状态管理功能

src/router/authentication.js

@@ -1,12 +1,35 @@
-// ！！！这是一个示例，请根据实际情况修改！！！
-import Login from '../views/authentication/Login.vue'
-import Register from '../views/authentication/Register.vue'
-import ManageProfile from '../views/authentication/ManageProfile.vue'
-import Profile from '../views/authentication/Profile.vue'
+import Login from '../views/authentication/Login.vue';
+import Register from '../views/authentication/Register.vue';
+import ManageProfile from '../views/authentication/ManageProfile.vue';
+import Profile from '../views/authentication/Profile.vue';
+import store from '../store';
 
-export default [
-    { path: '/login', component: Login },
-    { path: '/register', component: Register },
-    { path: '/manageProfile', component: ManageProfile },
-    { path: '/profile', component: Profile },
-]
+const routes = [
+  { path: '/login', component: Login },
+  { path: '/register', component: Register },
+  { path: '/manageProfile', component: ManageProfile },
+  {
+    path: '/profile',
+    component: Profile,
+    meta: { requiresAuth: true },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (!store.getters['authentication/isAuthenticated']) {
+      next('/login');
+    } else {
+      next();
+    }
+  } else {
+    next();
+  }
+});
+
+export default routes;

src/store/authentication.js

@@ -1,37 +1,50 @@
-import { createStore } from 'vuex';
 import axios from 'axios';
 
-const store = createStore({
-    state: {
-        user: null,
-        isAuthenticated: false,
-    },
-    mutations: {
-        setUser(state, user) {
-            state.user = user;
-            state.isAuthenticated = true;
-        },
-        clearUser(state) {
-            state.user = null;
-            state.isAuthenticated = false;
-        },
-    },
-    actions: {
-        async login({ commit }, credentials) {
-            const response = await axios.post('/api/login', credentials);
-            if (response.status === 200) {
-                commit('setUser', response.data.username);
-            }
-            return response;
-        },
-        logout({ commit }) {
-            commit('clearUser');
-        },
-    },
-    getters: {
-        isAuthenticated: (state) => state.isAuthenticated,
-        user: (state) => state.user,
-    },
-});
+const state = {
+  user: null,
+  isAuthenticated: false,
+};
 
-export default store;
+const mutations = {
+  setUser(state, user) {
+    state.user = user;
+    state.isAuthenticated = true;
+  },
+  clearUser(state) {
+    state.user = null;
+    state.isAuthenticated = false;
+  },
+};
+
+const actions = {
+  async login({ commit }, credentials) {
+    const response = await axios.post('/api/login', credentials);
+    if (response.status === 200) {
+      commit('setUser', response.data.username);
+    }
+    return response;
+  },
+  logout({ commit }) {
+    commit('clearUser');
+  },
+  async fetchUserProfile({ commit }) {
+    const response = await axios.get('/api/user-profile');
+    if (response.status === 200) {
+      commit('setUser', response.data);
+    }
+    return response;
+  },
+};
+
+const getters = {
+  isAuthenticated: (state) => state.isAuthenticated,
+  user: (state) => state.user,
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

src/views/authentication/Login.vue

@@ -16,7 +16,7 @@ const handleLogin = async () => {
   console.log('Logging in with', { username: username.value, password: password.value, rememberMe: rememberMe.value });
 
   try {
-    const response = await store.dispatch('login', {
+    const response = await store.dispatch('authentication/login', {
       username: username.value,
       password: password.value,
     });