Merge pull request #609 from xinnan-tech/web_HeaderBar_SignOut

清除本地token缓存，完成前端退出

main/manager-web/src/apis/api.js

@@ -7,7 +7,7 @@ import admin from './module/admin.js'
  * 如果你想调用8002端口，就用'/xiaozhi-esp32-api/api/v1'，请与vue.config.js的devServer配置相结合，方便跨域请求
  *
  */
-const DEV_API_SERVICE = 'https://apifoxmock.com/m1/5931378-5618560-default'
+const DEV_API_SERVICE = 'https://2662r3426b.vicp.fun/xiaozhi-esp32-api'
 // 8002开发完成完成后使用这个
 // const DEV_API_SERVICE = '/xiaozhi-esp32-api'
 

main/manager-web/src/components/HeaderBar.vue

@@ -43,7 +43,7 @@
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item icon="el-icon-plus" @click.native="">个人中心</el-dropdown-item>
             <el-dropdown-item icon="el-icon-circle-plus" @click.native="showChangePasswordDialog">修改密码</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="">退出登录</el-dropdown-item>
+            <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="handleLogout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -57,6 +57,8 @@
 <script>
 import userApi from '@/apis/module/user';
 import ChangePasswordDialog from './ChangePasswordDialog.vue'; // 引入修改密码弹窗组件
+import { mapActions } from 'vuex'; // 导入 mapActions
+
 
 export default {
   name: 'HeaderBar',
@@ -118,7 +120,24 @@ export default {
     // 显示修改密码弹窗
     showChangePasswordDialog() {
       this.isChangePasswordDialogVisible = true;
-    }
+    },
+    // 退出登录
+    async handleLogout() {
+      try {
+        // 调用 Vuex 的 logout action
+        await this.logout();
+
+        this.$message.success('退出登录成功');
+
+        this.$router.push('/login');
+      } catch (error) {
+        console.error('退出登录失败:', error);
+        this.$message.error('退出登录失败，请重试');
+      }
+    },
+
+    // 使用 mapActions 引入 Vuex 的 logout action
+    ...mapActions(['logout'])
   }
 }
 </script>

main/manager-web/src/store/index.js

@@ -6,7 +6,8 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    token: ''
+    token: '',
+    userInfo: {} // 添加用户信息存储
   },
   getters: {
     getToken(state) {
@@ -14,16 +15,34 @@ export default new Vuex.Store({
         state.token = localStorage.getItem('token')
       }
       return state.token
+    },
+    getUserInfo(state) {
+      return state.userInfo
     }
   },
   mutations: {
     setToken(state, token) {
       state.token = token
-      localStorage.token = token
+      localStorage.setItem('token', token)
+    },
+    setUserInfo(state, userInfo) {
+      state.userInfo = userInfo
+    },
+    clearAuth(state) {
+      state.token = ''
+      state.userInfo = {}
+      localStorage.removeItem('token')
     }
   },
   actions: {
+    // 添加 logout action
+    logout({ commit }) {
+      return new Promise((resolve) => {
+        commit('clearAuth')
+        resolve()
+      })
+    }
   },
   modules: {
   }
-})
+})