Vue3 用户认证：如何检查用户是否已登录

🧙?♂??诸位好，吾乃诸葛妙计，编程界之翘楚，代码之大师。算法如流水，逻辑如棋局。

📜 吾之笔记，内含诸般技术之秘诀。吾欲以此笔记，传授编程之道，助汝解技术难题。

📄?吾之文章，不以繁复之言，惑汝耳目；但以浅显之语，引汝入胜。

🚀 若此文对阁下有所裨益，敬请👍🏻-点赞 ? - 收藏?👀 - 关注，不胜感激。

在Vue 3中，检查用户是否登录通常涉及到以下几个步骤：

1. 状态管理：在客户端存储用户的登录状态，可以使用Vuex、Pinia或者组件的本地状态。

2. 路由守卫：使用Vue Router的导航守卫来保护需要认证的路由。

3. API调用：与后端通信以验证用户的登录状态。

下面是一个简单的例子，展示如何在Vue 3中检查用户是否登录：

步骤 1: 状态管理

首先，你需要一个状态管理库（例如Vuex或Pinia）或者组件的本地状态来存储用户的登录信息。这里我们使用Pinia作为例子：

// store/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null, // 用户信息，如果为null则表示用户未登录
  }),
  actions: {
    setUser(userData) {
      this.user = userData;
    },
    clearUser() {
      this.user = null;
    },
    // 可以添加更多的actions来处理登录、登出等
  },
});

步骤 2: 路由守卫

在Vue Router中，你可以使用导航守卫来检查用户是否登录，并在需要时重定向到登录页面：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '../store/auth';

const routes = [
  // ...定义你的路由
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  const isAuthenticated = !!authStore.user;

  if (to.meta.requiresAuth && !isAuthenticated) {
    // 如果路由需要认证，但用户未登录，则重定向到登录页面
    next({ name: 'login' });
  } else {
    // 否则，允许路由继续
    next();
  }
});

export default router;

在你的路由定义中，你可以使用meta字段来指定哪些路由需要认证：

{
  path: '/protected',
  name: 'Protected',
  component: () => import('../views/ProtectedView.vue'),
  meta: { requiresAuth: true }
}

步骤 3: API调用

在实际应用中，你可能需要与后端API通信来验证用户的登录状态。例如，你可以在应用启动时发送一个请求到后端来检查用户是否已经登录：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { useAuthStore } from './store/auth';
import axios from 'axios';

const app = createApp(App);

app.use(router);

router.isReady().then(async () => {
  const authStore = useAuthStore();

  try {
    const response = await axios.get('/api/check-auth');
    authStore.setUser(response.data.user);
  } catch (error) {
    authStore.clearUser();
  }

  app.mount('#app');
});

在这个例子中，我们在路由准备好之后发送一个请求到/api/check-auth来检查用户的登录状态。如果用户已经登录，我们将用户信息存储在状态管理库中；如果用户未登录或请求失败，我们清除用户信息。

请注意，这只是一个基本的例子，实际应用中你需要考虑更多的安全措施，比如使用HTTPS、处理令牌过期等。此外，你可能还需要实现登录和登出的逻辑。

👑 阁下若觉此文有益，恳请施以👍🏻-点赞 ? - 收藏?👀 - 关注之礼，以资鼓励。倘若有疑问或建言，亦请在评论区💬评论?赐教，吾将感激不尽。