学生退出登录

消逝

2024-07-11 eee0af098e5acf66d729fbeb0e440e96208053f8

学生退出登录

 src/api/modules/user.js

@@ -1,6 +1,11 @@
import service from "@/api";


// 登录请求
export const login = (postData = {}) => {
  return service.post('/api/user/login', postData);
}

// 退出登录
export const logout = () => {
    return service.post('/api/user/logout');
}

 src/views/home/components/user-panel/index.vue

@@ -2,7 +2,8 @@
  <div class="user-panel max-w-sm min-w-96 h-fit">
    <el-card class="card">
      <div class="panel-content flex flex-col items-center">
        <div class="avatar-container w-40 h-40 rounded-full overflow-hidden">
        <!-- 学生信息 -->
        <div class="avatar-container w-40 h-40 rounded-full overflow-hidden" @click="quit()">
          <div class="avatar-content" v-if="userInfo.imagePath">
            <img :src="userInfo.imagePath" class="avatar-img" alt="">
          </div>
@@ -18,7 +19,7 @@
        <div class="department-container text-base mb-10">
          {{ userInfo.userName }}
        </div>

        <!-- 学生选项 -->
        <div class="tool-container grid grid-cols-3 gap-10">
          <div class="tool-item text-center cursor-pointer" v-for="item in toolList" @click="toolClick(item)">
            <div class="tool-icon mb-1">
@@ -41,14 +42,17 @@
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/index.js';
import { logout } from '@/api/modules/user.js';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const { userInfo } = storeToRefs(userStore
    
)



const router = useRouter();

// 获取列表
const toolList = ref([
  {
    id: 1,
@@ -70,21 +74,31 @@
  },
]);


// 获取颜色
const getColor = computed(() => {
  return randomColor();
});

// 获取用户信息
const getFirstName = computed(() => {
  return userInfo.value.realName && userInfo.value.realName[0];
});

// 点击事件
const toolClick = (item) => {
  if (item.path) {
    router.push(item.path);
  }
}

// 退出登录
const quit = () => {
    logout().then(() =>{
        router.push('/login').then(()=>{
            userStore.setUserInfo(null)
            localStorage.clear("user")
        })
    }).catch((err) =>{
        console.log("退出登录失败,失败原因;",err)
    })
}
</script>

<style lang="scss" scoped>