如何修复laravel PWA登录时出现419页面过期错误

Question

所以我正在使用workbox开发laravel PWA，每当我第一次登录时它都运行良好，但是当我第二次登录时，我收到了419页面过期错误。

这是我的 Service Worker 中的代码：

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);


const precaching = workbox.precaching;
const routing = workbox.routing;
const strategies = workbox.strategies;
const expiration = workbox.expiration;
const cacheableResponse = workbox.cacheableResponse;

precaching.precacheAndRoute([
  {url: '/login', revision: '383676'},
  {url: '/fallback.blade.php', revision: null},
  {url: '/css/auth/users.css', revision: null},
  {url: 'css/resident/resident-layout.css', revision: null},
  {url: 'images/welcome-bg.png', revision: null},
  {url: 'js/resident/resident-sidebar.js', revision: null},
  {url: 'js/app.js', revision: null},
]);

routing.registerRoute(
  ({url}) => 
    url.origin === 'https://fonts.googleapis.com' || 
    url.origin === 'https://cdn.jsdelivr.net' ||
    url.origin === 'https://code.jquery.com' ||
    url.origin === 'https://kit.fontawesome.com' ||
    url.origin === 'https://fonts.gstatic.com',
  new strategies.StaleWhileRevalidate({
    cacheName: 'links',
  })
);

routing.registerRoute(
  ({request}) => request.destination === 'image',
  new strategies.CacheFirst({
    cacheName: 'images',
    plugins: [
      new cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
      }),
    ]
  })
);

routing.registerRoute(
   ({request}) => request.method === 'GET',
   new strategies.StaleWhileRevalidate({
     cacheName: 'responses',
     plugins: [
       new cacheableResponse.CacheableResponsePlugin({
         statuses: [0, 200],
       }),
     new expiration.ExpirationPlugin({
         maxEntries: 50,
         maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
       }),
     ]
   }),
 );

我被困在这里好几天了，我不知道如何解决它。需要这个尽快

Answer 1

我现在明白为什么会收到该错误了，这是因为我在安装 Service Worker 时预缓存了登录表单页面

{url: '/login', revision: '383676'}

所以当我第一次登录时它工作正常，但是当我注销时，它会重新生成一个新令牌，同时重定向到我预缓存的登录页面，所以当我尝试再次登录时，它会尝试从缓存有过期的令牌，它将抛出 419 状态错误。 我通过删除预缓存中的登录表单页面

{url: '/login', revision: '383676'}

解决了这个问题。