vue3 刷新页面保持登录状态且能获取到user情报

要在Vue 3中实现刷新页面后保持登录状态并获取用户信息，你可以使用浏览器的本地存储（例如localStorage或sessionStorage）来存储用户的登录状态和信息。下面是一个简单的示例：

在用户登录成功后，将用户信息存储在本地存储中：

// 登录成功后
localStorage.setItem('isLoggedIn', true);
localStorage.setItem('user', JSON.stringify(user));

在应用程序初始化时，检查本地存储中的登录状态和用户信息：

// main.js
const isLoggedIn = localStorage.getItem('isLoggedIn');
const user = JSON.parse(localStorage.getItem('user'));

createApp(App).mount('#app');

然后，在Vue组件中，你可以使用`isLoggedIn`和`user`来渲染登录状态和用户信息：

<template>
  <div>
    <div v-if="isLoggedIn">
      Logged In as {{ user.name }}
    </div>
    <div v-else>
      Not Logged In
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: localStorage.getItem('isLoggedIn'),
      user: JSON.parse(localStorage.getItem('user'))
    };
  }
};
</script>

这样，当页面刷新时，Vue组件会从本地存储中获取登录状态和用户信息，并根据它们来更新页面。请注意，这只是一个简单的示例，你可能需要根据你的具体需求进行适当的调整和错误处理。