新增退出登录功能

src/api/user/index.js

@@ -8,15 +8,9 @@ export function getUsers(data = {}) {
   })
 }
 
-export function getUser(id) {
-  if (id) {
-    return request({
-      url: `/user/${id}`,
-      method: 'get'
-    })
-  }
+export function getUser() {
   return request({
-    url: '/user',
+    url: '/index/getUserInfo',
     method: 'get'
   })
 }

src/layout/components/Header/index.vue

@@ -1,23 +1,17 @@
 <template>
   <n-layout-header class="layout__header" bordered>
     <!-- <SideMenu menu-mode="horizontal" /> -->
-    <div class="user_msg">
-      <n-image
-        class="user_avatar"
-        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-        preview-disabled
-      />
-      <span class="user_name">用户名</span>
-    </div>
+    <log-out />
   </n-layout-header>
 </template>
 
 <script>
 import SideMenu from '@/layout/components/Menu/index.vue'
+import LogOut from '../Logout/index.vue'
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LayoutHeader',
-  components: { SideMenu }
+  components: { SideMenu, LogOut }
 })
 </script>
 

src/layout/components/Logout/components/UpdateModal.vue

@@ -0,0 +1,38 @@
+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <n-form
+        ref="formRef"
+        :model="form"
+        label-placement="left"
+        :rules="rules"
+        :on-positive-click="handleConfirm"
+        :on-negative-click="handleClose"
+      >
+        <n-form-item
+          label="登录密码:"
+          path="password"
+        >
+          <n-input
+            v-model:value="form.password"
+            type="password"
+            :maxlength="20"
+            placeholder="请输入登录密码"
+          />
+        </n-form-item>
+      </n-form>
+    </template>
+  </Modal>
+</template>
+<script>
+import Modal from '@/components/Modal/index.vue'
+export default {
+  name: 'UpdateModal',
+  components: { Modal }
+}
+</script>

src/layout/components/Logout/index.vue

@@ -1,24 +1,94 @@
 <template>
-  <div class="user_msg">
-    <n-image
-      class="user_avatar"
-      src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-      preview-disabled
-    />
-    <span class="user_name">用户名</span>
-  </div>
+  <n-dropdown trigger="hover" :options="options" @select="selectKey">
+    <div class="user_msg">
+      <n-image
+        class="user_avatar"
+        :src="userInfo.avatar"
+        preview-disabled
+      />
+      <span class="user_name">{{ userInfo.realname }}</span>
+    </div>
+  </n-dropdown>
 </template>
 <script>
+import { reactive, toRefs, h } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+  Pencil as EditIcon,
+  LogOutOutline as LogoutIcon
+} from '@vicons/ionicons5'
+import { useDialog } from 'naive-ui'
+import { loginOut } from '@/api/login/index.js'
+import { mapActions, mapState } from 'pinia'
+import { useUserStore } from '@/store/modules/user.js'
 export default {
-    name: 'Logout',
-    props: {
-        userInfo: {
-            type: Object,
-            default()=> {
-                
-            }
+  name: 'LogOut',
+  setup() {
+    const renderIcon = (icon) => {
+      return () => {
+        return h(NIcon, null, {
+          default: () => h(icon)
+        })
+      }
+    }
+    const data = reactive({
+      userInfo: {
+        realname: '管理员'
+      },
+      options: [
+        {
+          label: '修改密码',
+          key: 'edit',
+          icon: renderIcon(EditIcon)
+        },
+        {
+          label: '退出登录',
+          key: 'out',
+          icon: renderIcon(LogoutIcon)
         }
+      ]
+    })
+
+    // 选中选项触发的回调
+    const dialog = useDialog()
+
+    return {
+      ...toRefs(data),
+      dialog
+    }
+  },
+  computed: {
+    ...mapState(useUserStore, {
+      userInfo: 'userInfo'
+    })
+  },
+  methods: {
+    ...mapActions(useUserStore, ['logout']),
+    selectKey(key) {
+      console.log(key)
+      if (key === 'out') {
+        this.dialog.warning({
+          title: '提示',
+          content: '确定要退出登录吗？',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            loginOut().then((res) => {
+              if (res.code === 0) {
+                this.$router.replace('/login')
+                this.logout()
+                $message.success(res.msg)
+              } else {
+                $message.error(res.msg)
+              }
+            })
+          }
+        })
+      } else if (key === 'edit') {
+        console.log('修改密码')
+      }
     }
+  }
 }
 </script>
 <style scoped>
@@ -32,4 +102,4 @@ export default {
   height: 30px;
   margin-right: 10px;
 }
-</style>
+</style>

src/layout/index.vue

@@ -25,16 +25,36 @@
   </n-space>
 </template>
 
-<script setup>
+<script >
 // import { reactive } from 'vue'
 import Header from './components/Header/index.vue'
 import SideBar from './components/Sidebar/index.vue'
 import Tags from './components/Tags/index.vue'
 import { useSettingStore } from '@/store/modules/setting.js'
 import { computed } from 'vue'
-const settingStore = useSettingStore()
-const menuMode = computed(() => settingStore.getMenuMode)
-const tagsMenuSetting = computed(() => settingStore.getTagsMenuSetting)
+import { useUserStore } from '@/store/modules/user.js'
+export default {
+  components: { Header, SideBar, Tags },
+  setup() {
+    const settingStore = useSettingStore()
+    const menuMode = computed(() => settingStore.getMenuMode)
+    const tagsMenuSetting = computed(() => settingStore.getTagsMenuSetting)
+
+    /**
+     * 获取用户信息
+     */
+    const useUser = useUserStore()
+    function getUserNow() {
+      useUser.getUserInfo()
+    }
+    getUserNow()
+    return {
+      settingStore,
+      menuMode,
+      tagsMenuSetting
+    }
+  }
+}
 
 </script>
 

src/store/modules/user.js

@@ -9,17 +9,8 @@ export const useUserStore = defineStore('user', {
     }
   },
   getters: {
-    userId() {
-      return this.userInfo?.id
-    },
-    name() {
-      return this.userInfo?.name
-    },
-    avatar() {
-      return this.userInfo?.avatar
-    },
-    role() {
-      return this.userInfo?.role || []
+    userInfoMsg() {
+      return this.userInfo
     }
   },
   actions: {
@@ -27,15 +18,14 @@ export const useUserStore = defineStore('user', {
       try {
         const res = await getUser()
         if (res.code === 0) {
-          const { id, name, avatar, role } = res.data
-          this.userInfo = { id, name, avatar, role }
-          return Promise.resolve(res.data)
+          this.userInfo = res.data
+          return Promise.resolve(res.msg)
         } else {
-          return Promise.reject(res.message)
+          return Promise.reject(res.msg)
         }
       } catch (error) {
         console.error(error)
-        return Promise.reject(error.message)
+        return Promise.reject(error.msg)
       }
     },
     logout() {

src/views/system/user/info.js

@@ -2,7 +2,7 @@ import { getRoleAll } from '@/api/system/role/index'
 import { dataToSelect } from '@/utils/handleData.js'
 import { ref } from 'vue'
 const rolesOptions = ref([])
-async function getRolesOption() {
+const getRolesOption = async function() {
   const res = await getRoleAll()
   rolesOptions.value = dataToSelect(res.data, { label: 'name', value: 'id' })
 }