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

src/router/authentication.js

@@ -1,12 +1,35 @@
-// ！！！这是一个示例，请根据实际情况修改！！！
+import Login from '../views/authentication/Login.vue';
-import Login from '../views/authentication/Login.vue'
+import Register from '../views/authentication/Register.vue';
-import Register from '../views/authentication/Register.vue'
+import ManageProfile from '../views/authentication/ManageProfile.vue';
-import ManageProfile from '../views/authentication/ManageProfile.vue'
+import Profile from '../views/authentication/Profile.vue';
-import Profile from '../views/authentication/Profile.vue'
+import store from '../store';
 
-export default [
+const routes = [
   { path: '/login', component: Login },
   { path: '/register', component: Register },
   { path: '/manageProfile', component: ManageProfile },
-    { path: '/profile', component: Profile },
+  {
-]
+    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,12 +1,11 @@
-import { createStore } from 'vuex';
 import axios from 'axios';
 
-const store = createStore({
+const state = {
-    state: {
   user: null,
   isAuthenticated: false,
-    },
+};
-    mutations: {
+
+const mutations = {
   setUser(state, user) {
     state.user = user;
     state.isAuthenticated = true;
@@ -15,8 +14,9 @@ const store = createStore({
     state.user = null;
     state.isAuthenticated = false;
   },
-    },
+};
-    actions: {
+
+const actions = {
   async login({ commit }, credentials) {
     const response = await axios.post('/api/login', credentials);
     if (response.status === 200) {
@@ -27,11 +27,24 @@ const store = createStore({
   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;
   },
-    getters: {
+};
+
+const getters = {
   isAuthenticated: (state) => state.isAuthenticated,
   user: (state) => state.user,
-    },
+};
-});
 
-export default store;
+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,
     });