鉴权应用

在 Nuxt.js 应用中实现鉴权（Authentication）功能，可以采用多种方法来确保用户的安全访问。这里我们将介绍一种常见的基于 JWT（JSON Web Token）的鉴权方案，并结合 Vuex 和中间件来管理认证状态。

1. 安装必要的依赖

首先，你可能需要安装一些额外的库来帮助处理 HTTP 请求和 JWT 解析等任务：

npm install @nuxtjs/axios @nuxtjs/auth-next

或者使用 Yarn:

yarn add @nuxtjs/axios @nuxtjs/auth-next

@nuxtjs/axios 是一个封装了 axios 的模块，方便发起 HTTP 请求；@nuxtjs/auth-next 提供了对认证流程的支持，包括登录、登出以及保护路由等功能。

2. 配置 nuxt.config.js

在 nuxt.config.js 中配置 @nuxtjs/axios 和 @nuxtjs/auth-next 模块：

export default {
  modules: ["@nuxtjs/axios", "@nuxtjs/auth-next"],
  axios: {
    // 可选配置
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: "/api/auth/login",
            method: "post",
            propertyName: "token",
          },
          user: { url: "/api/auth/user", method: "get", propertyName: false },
          logout: { url: "/api/auth/logout", method: "post" },
        },
        tokenType: "Bearer",
      },
    },
  },
};

这里的 endpoints 需要根据你的后端 API 进行调整。

3. 创建登录页面

创建一个简单的登录页面，在其中调用 this.$auth.loginWith() 方法进行登录：

<template>
  <div>
    <form @submit.prevent="login">
      <input v-model="username" type="text" placeholder="Username" />
      <input v-model="password" type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username: "",
        password: "",
      };
    },
    methods: {
      async login() {
        await this.$auth
          .loginWith("local", {
            data: {
              username: this.username,
              password: this.password,
            },
          })
          .then(() => {
            console.log("Logged in successfully");
          })
          .catch((error) => {
            console.error("Error logging in:", error);
          });
      },
    },
  };
</script>

4. 使用中间件保护路由

为了保护某些页面或整个应用不受未授权用户的访问，可以创建自定义中间件。例如，创建一个名为 auth.js 的文件在 middleware 目录下：

export default function ({ store, redirect }) {
  if (!store.state.auth.loggedIn) {
    return redirect("/login");
  }
}

然后，在需要保护的页面或布局中使用这个中间件：

export default {
  middleware: "auth",
};

5. 获取当前用户信息

一旦用户登录成功，你可以通过 $auth.user 访问当前用户的信息。可以在页面加载时自动获取用户信息：

export default {
  async fetch() {
    await this.$auth.fetchUser();
  },
};

以上就是基于 JWT 的鉴权方案的基本实现步骤。通过这种方式，你可以有效地管理和保护你的 Nuxt.js 应用中的不同资源，确保只有经过验证的用户才能访问特定的内容。根据实际需求，你还可以进一步扩展和完善鉴权逻辑，比如添加刷新令牌机制、会话超时处理等。