JWT 在 Vue.js + Koa.js 项目中的用法

2023-12-25 09:35:42

前言

随着前后端分离架构的兴起，越来越多的项目开始使用 JSON Web Token (JWT) 来进行用户认证和授权。JWT 是一种轻量级的安全令牌，可以用来在不同系统之间传递信息，在本文中，我们将介绍如何在 Vue.js 前端和 Koa.js 后端之间使用 JWT 来实现用户认证和授权。

JWT 简介

JWT 是一个开放标准，定义了一种紧凑和自包含的方式，用于在各方之间安全地传输信息。JWT 由三部分组成：头部、载荷和签名。

头部：包含令牌的元数据，例如令牌的类型和签名算法。
载荷：包含要传输的信息，例如用户 ID、用户名和角色。
签名：使用头部和载荷计算的签名，用于验证令牌的完整性和真实性。

在 Vue.js + Koa.js 项目中使用 JWT

1. 安装依赖

首先，我们需要在项目中安装必要的依赖。对于 Vue.js 前端，我们需要安装 vue-jwt-decode 包，该包可以帮助我们解码 JWT 令牌。对于 Koa.js 后端，我们需要安装 jwt-simple 包，该包可以帮助我们生成和验证 JWT 令牌。

// Vue.js 前端
npm install vue-jwt-decode

// Koa.js 后端
npm install jwt-simple

2. 配置 Koa.js 后端

在 Koa.js 后端，我们需要配置 JWT 认证和授权中间件。

// 引入必要的包
const jwt = require('jwt-simple');
const secret = 'your-secret-key'; // 替换为您的密钥

// 配置 JWT 认证中间件
app.use(async (ctx, next) => {
  const token = ctx.headers['authorization'];
  if (token) {
    try {
      const decoded = jwt.decode(token, secret);
      ctx.state.user = decoded;
    } catch (err) {
      ctx.status = 401;
      ctx.body = {
        message: 'Invalid token'
      };
      return;
    }
  }
  await next();
});

// 配置 JWT 授权中间件
app.use(async (ctx, next) => {
  const requiredRole = ctx.state.route.meta.role;
  if (requiredRole && !ctx.state.user.roles.includes(requiredRole)) {
    ctx.status = 403;
    ctx.body = {
      message: 'Forbidden'
    };
    return;
  }
  await next();
});

3. 配置 Vue.js 前端

在 Vue.js 前端，我们需要配置 Vuex 存储来存储 JWT 令牌。

// 引入必要的包
import Vue from 'vue'
import Vuex from 'vuex'
import jwtDecode from 'vue-jwt-decode'

// 创建 Vuex 存储
const store = new Vuex.Store({
  state: {
    token: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    }
  }
})

// 创建一个 Vuex 插件来解码 JWT 令牌
const jwtPlugin = {
  install(Vue) {
    Vue.prototype.$jwtDecode = jwtDecode
  }
}

// 安装 Vuex 存储和 Vuex 插件
Vue.use(Vuex)
Vue.use(jwtPlugin)

4. 使用 JWT 进行认证和授权

4.1 用户登录

当用户登录时，我们可以使用 Koa.js 后端生成一个 JWT 令牌，并将该令牌返回给前端。

// Koa.js 后端
app.post('/login', async (ctx) => {
  const { username, password } = ctx.request.body;
  const user = await User.findOne({ username, password });
  if (user) {
    const token = jwt.encode({ id: user._id, username: user.username, roles: user.roles }, secret);
    ctx.body = {
      token
    };
  } else {
    ctx.status = 401;
    ctx.body = {
      message: 'Invalid username or password'
    };
  }
});

4.2 用户注销

当用户注销时，我们可以简单地将 Vuex 存储中的 JWT 令牌设置为 null。

// Vue.js 前端
store.commit('setToken', null)

4.3 获取用户资料

当我们需要获取用户资料时，我们可以使用 Vue.js 前端中的 JWT 令牌来请求 Koa.js 后端。

// Vue.js 前端
async fetchUserProfile() {
  const token = store.state.token;
  const response = await fetch('/api/profile', {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
  const data = await response.json();
  return data;
}

4.4 检查用户权限

当我们需要检查用户权限时，我们可以使用 Vue.js 前端中的 JWT 令牌来请求 Koa.js 后端。

// Vue.js 前端
async checkUserPermission(permission) {
  const token = store.state.token;
  const response = await fetch('/api/check-permission', {
    headers: {
      Authorization: `Bearer ${token}`
    },
    body: JSON.stringify({ permission })
  });
  const data = await response.json();
  return data;
}