Vue.js Vue.js 中的 JWT 认证

在本文中，我们将介绍如何使用 Vue.js 进行 JWT 认证。JWT（JSON Web Token）是一种用于身份验证和授权的开放标准。它可以在服务器和客户端之间安全地传输认证信息，使得用户可以在多个应用程序中无需重新登录进行访问。

什么是 JWT ？

JWT 是由三个部分组成的字符串，通过点号分隔开来：头部（header）、载荷（payload）和签名（signature）。头部包含了加密算法和类型信息，载荷包含了用户信息和其他需要的数据，签名用于验证 JWT 的有效性。

一个典型的 JWT 如下所示：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

在 Vue.js 中实现 JWT 认证的步骤

1. 安装依赖

首先，我们需要安装一个用于处理 JWT 的库。在 Vue.js 项目中使用 npm 或 yarn 安装 jsonwebtoken 库。

$ npm install jsonwebtoken
# 或
$ yarn add jsonwebtoken

2. 编写认证方法

在 Vue.js 项目中，我们可以在全局实例或单独的组件中编写 JWT 认证的方法。以下是一个示例实现：

import jwt from 'jsonwebtoken';

export default {
  methods: {
    authenticateUser(username, password) {
      // 假设这里向服务器发送用户凭证并获取 JWT
      const jwtToken = this.getJwtToken(username, password);
      // 将 JWT 存储在本地存储中，以备后续使用
      localStorage.setItem('jwtToken', jwtToken);
    },
    getJwtToken(username, password) {
      // 使用 jsonwebtoken 库生成 JWT
      const token = jwt.sign({ username, password }, 'secrectKey', { expiresIn: '1h' });
      return token;
    },
    isAuthenticated() {
      const jwtToken = localStorage.getItem('jwtToken');
      // 使用 jsonwebtoken 库验证 JWT 的有效性
      const decodedToken = jwt.verify(jwtToken, 'secrectKey');
      return !!decodedToken;
    }
  }
}

这个示例中，我们在 authenticateUser 方法中向服务器发送用户凭证并获取 JWT。然后，我们将 JWT 存储在本地存储中，以备后续使用。在 getJwtToken 方法中，我们使用 jsonwebtoken 库生成 JWT。最后，在 isAuthenticated 方法中，我们验证存储在本地存储中的 JWT 的有效性。

3. 在组件中使用 JWT 认证方法

接下来，我们可以将 JWT 认证方法应用到 Vue.js 组件中。以下是一个示例：

<template>
  <div>
    <input v-model="username" type="text" placeholder="Username" />
    <input v-model="password" type="password" placeholder="Password" />
    <button @click="authenticate">Login</button>
    <div>Logged in: {{ isLoggedIn }}</div>
  </div>
</template>

<script>
import AuthToken from './AuthToken';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  computed: {
    isLoggedIn() {
      return AuthToken.isAuthenticated();
    }
  },
  methods: {
    authenticate() {
      AuthToken.authenticateUser(this.username, this.password);
    }
  }
}
</script>

在这个示例组件中，我们绑定了输入框中的用户名和密码。当用户点击登录按钮时，我们调用 authenticate 方法来进行 JWT 认证。最后，我们使用 computed 属性来监测用户是否已经登录。