解决vue3项目右上角用户未登录与登录状态切换

需求

当用户未登录时，右上角显示未登录。已登录则显示登录状态。

解决思路

借助store来存储是否登陆的信息。

store中定义一个js文件，内容如下：

import { defineStore } from 'pinia'

export const useUserInfo = defineStore('userInfo',{
    state: () => ({
        flagLogin: false,  // 是否登录的标志
    }),

    actions: {
        ifLogin() {
            let token = localStorage.getItem('token');
            if(token) {
              this.flagLogin = true;
            } else {
              this.flagLogin = false;
            }
        }
    }
})

右上角展示文件：

<div class="personal-item">
  <div v-if="userInfoStore.flagLogin">
    <el-popover placement="bottom" :width="255" trigger="click" popper-class="info-popper">
      <template #reference>
        <div class="down-btn">
          <span>已登录</span>
          <img src="/src/assets/images/nav_down.png" width="14" alt=""/>
        </div>
      </template>
      <div @click="signOut" class="signOut">退出登录</div>
    </el-popover>          
  </div>
  
  <div class="no-login-box" v-else>
    <img src="@/assets/images/no_login.svg" alt="">
    <div class="no-login">未登录</div>
  </div>
</div>

当登录成功或退出登录时，都调用store中定义的依据token判断是否登录的函数：

localStorage.setItem('token', res.data.token);
userInfoStore.ifLogin()
ElMessage.success("登录成功");

const signOut = () => {
  localStorage.clear();
  ElMessage.success("退出登录成功");
  router.push('/login');
  userInfoStore.ifLogin()
}

<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router'
import {useUserInfo} from "@/stores/user";
import {ElMessage} from 'element-plus';

const router = useRouter();
const userInfoStore = useUserInfo()

const signOut = () => {
  localStorage.clear();
  ElMessage.success("退出登录成功");
  router.push('/login');
  userInfoStore.ifLogin()
}
</script>

完美解决！