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

src/store/authentication.js

@@ -1,30 +1,37 @@
-const state = {
+import { createStore } from 'vuex';
-    user: null
+import axios from 'axios';
-}
 
-const mutations = {
+const store = createStore({
-    setUser(state, user) {
+    state: {
-        state.user = user
+        user: null,
-    }
+        isAuthenticated: false,
-}
-
-const actions = {
-    login({ commit }, user) {
-        commit('setUser', user)
     },
-    logout({ commit }) {
+    mutations: {
-        commit('setUser', null)
+        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 getters = {
+export default store;
-    isAuthenticated: state => !!state.user
-}
-
-export default {
-    namespaced: true,
-    state,
-    mutations,
-    actions,
-    getters
-}

src/views/authentication/Login.vue

@@ -2,7 +2,11 @@
 import { ref } from 'vue';
 import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem, ElMessage } from 'element-plus';
 import 'element-plus/dist/index.css';
-import axios from 'axios';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
 
 const username = ref('');
 const password = ref('');
@@ -12,26 +16,20 @@ const handleLogin = async () => {
   console.log('Logging in with', { username: username.value, password: password.value, rememberMe: rememberMe.value });
 
   try {
-    const response = await axios.post('/api/login', {
+    const response = await store.dispatch('login', {
       username: username.value,
       password: password.value,
     });
 
     if (response.status === 200) {
-      const data = response.data;
+      ElMessage.success('登录成功');
-      ElMessage.success(data.message);
+      router.push('/profile');
-      // 保存token到本地存储或Vuex状态管理
-      localStorage.setItem('token', data.token);
-      // 处理登录成功逻辑，例如跳转到主页
-      // router.push('/home');
     } else {
-      // 处理非200的情况
       ElMessage.error('登录失败，请稍后再试');
     }
   } catch (error) {
     if (error.response && error.response.status === 401) {
-      const data = error.response.data;
+      ElMessage.error('用户名或密码错误');
-      ElMessage.error(data.message);
     } else {
       ElMessage.error('登录失败，请稍后再试');
     }