使用 Service Worker 存储 Token

一般一个有登录功能的网站，用户登录成功后会返回一个 Token，以便在后续操作中进行身份验证。

Token 在客户端存储的方式不只一种，常见的有 Cookie、Local Storage、Session Storage 或直接定义一个变量在内存中存储。

这些方式各有使用场景和利弊，讨论它们不是本文的重点，要了解可查看此文^[1]。本文说的 Service Worker 存储方案也是对上文的提取，算作简单的学习笔记，供以后自己使用时快速参考。

Service Worker

使用步骤：

首先在页面中引入 service worker 文件和作用范围：

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker
      .register("serviceWorker.js", { scope: "/serviceWorker.html" })
      .then(
        function (registration) {
          console.log("ServiceWorker registration succesful!");
        },
        function (err) {
          console.log("ServiceWorker registration failed: ", err);
        }
      );
  });
}

将登录后获取到的 Token 传递给 service worker:

function login() {
  fetch("/api/login")
    .then((res) => {
      if (res.status === 200) {
        return res.json();
      } else {
        throw Error(res.statusText);
      }
    })
    .then((data) => {
      navigator.serviceWorker.controller.postMessage({
        type: "SET_TOKEN",
        token: data.token,
      });
    })
    .catch(console.error);
}

service worker 将收到的 Token 存储起来：

// Global token variable in the service worker
let token = '';

// Exposed "method" for saving the token
self.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'SET_TOKEN') {
        token = event.data.token;
        console.log("[SW] token set!");
    }
});

service worker 拦截 ajax 请求，自动将 Token 植入到请求 headers 中:

// Helper function to add the auth header if the oubound request matches the whitelists
const addAuthHeader = function (event) {
  destURL = new URL(event.request.url);

  const modifiedHeaders = new Headers(event.request.headers);
  if (token) {
    modifiedHeaders.append("Authorization", token);
  }
  const authReq = new Request(event.request, {
    headers: modifiedHeaders,
    mode: "cors",
  });
  event.respondWith((async () => fetch(authReq))());
};

// Intercept all fetch requests and add the auth header
self.addEventListener("fetch", addAuthHeader);