Laravel csrf_token() пропадает после перезагрузки. Должно ли так быть?

Question

Я делаю. уведомления в своём проекте на laravel и vue по этому гайду Push notifications in Laravel Нужно использовать csrf токен в fetch запросе. Для этого я в head (index.blade.php) поместил такой код

<meta name="csrf-token" content="{{ csrf_token() }}">

А в js получаю токен таким образом

const token = document.querySelector('meta[name=csrf-token]') ? .getAttribute('content')

Index.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Бедные птички - проект, в котором вы с соткой в руках решаете открыть свою
    ферму яиц. Вы покупаете птиц, они несут вам яйца, вы их продаете. Вроде всё просто!">
  <meta name="theme-color" content="#ffffff" />
  <meta name="apple-mobile-web-app-title" content="Poor birds">
  <meta name="application-name" content="Poor birds"> {{--
  <meta name="msapplication-TileColor" content="#464646">--}}
  <meta name="theme-color" content="#ffffff">
  <base href="/">

  <title>Бедные птички</title>

  <meta name="csrf-token" content="{{ csrf_token() }}">

  <!--  favicons  -->
  <link rel="apple-touch-icon" sizes="180x180" href="{{ URL::asset('favicons/apple-touch-icon.png')  }}">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ URL::asset('favicons/favicon-32x32.png')  }}">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ URL::asset('favicons/favicon-16x16.png')  }}">
  <link rel="mask-icon" href="{{ URL::asset('favicons/safari-pinned-tab.svg')  }}" color="#5bbad5">

  <!-- manifest -->
  <link rel="manifest" href="{{ URL::asset('manifest.json')  }}">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;600&display=swap" rel="stylesheet">


  <!-- Styles -->
  <link href="/css/app.css" rel="stylesheet">
  <style>
    html,
    body {
      background-color: #fff;
      color: #636b6f;
      font-family: 'Nunito', sans-serif;
      font-weight: 200;
      height: 100vh;
      margin: 0;
    }
    
    * {
      box-sizing: content-box;
    }
  </style>
</head>

<body>
  <div id="app">
    <app></app>
  </div>

  <script src="/js/app.js"></script>
</body>

</html>

service-worker.js

const staticCacheName = 'static-cache-v0';
const dynamicCacheName = 'dynamic-cache-v0';

const staticAssets = [
  '/favicons/favicon-16x16.png',
  '/favicons/favicon.ico',
  '/assets/icons/icon-72x72.png',
  '/assets/icons/icon-96x96.png',
  '/assets/icons/icon-144x144.png',
  '/assets/icons/icon-128x128.png',
  '/assets/icons/icon-152x152.png',
  '/assets/icons/icon-192x192.png',
  '/assets/icons/icon-512x512.png',
  '/manifest.json',
  '/js/app.js',
];

self.addEventListener('install', async event => {
  const cache = await caches.open(staticCacheName);
  await cache.addAll(staticAssets);
});

self.addEventListener('activate', async event => {
  const cachesKeys = await caches.keys();
  const checkKeys = cachesKeys.map(async key => {
    if (![staticCacheName, dynamicCacheName].includes(key)) {
      await caches.delete(key);
    }
  });
  await Promise.all(checkKeys);
});

self.addEventListener('fetch', event => {
  if (event.request.url.indexOf('/api') !== -1) return;
  event.respondWith(checkCache(event.request));
});

async function checkCache(req) {
  const cachedResponse = await caches.match(req);
  return cachedResponse || checkOnline(req);
}

async function checkOnline(req) {
  const cache = await caches.open(dynamicCacheName);
  try {
    const res = await fetch(req);
    await cache.put(req, res.clone());
    return res;
  } catch (error) {
    const cachedRes = await cache.match(req);
    if (cachedRes) {
      return cachedRes;
    } else if (req.url.indexOf('.html') !== -1) {
      return caches.match('./asset/offline.html');
    } else {
      return caches.match('./images/no-image.jpg');
    }
  }
}

// Pushhh
self.addEventListener('push', function(e) {
  if (!(self.Notification && self.Notification.permission === 'granted')) {
    return;
  }

  if (e.data) {
    let msg = e.data.json();
    console.log(msg)
    e.waitUntil(self.registration.showNotification(msg.title, {
      body: msg.body,
      icon: msg.icon,
      actions: msg.actions
    }));
  }
});

self.addEventListener('notificationclick', function(event) {
  let messageId = event.notification.data;

  event.notification.close();

  if (event.action == 'open') {
    clients.openWindow("/account/eggs");
  } else {
    clients.openWindow("/account/eggs");
  }
}, false);

После ctrl+f5 всё работает - meta tag существует. Но после того, как я нажму f5, то есть просто перезагружу страницу, meta пропадает со страницы совсем, и запрос возвращает ошибку.

Подскажите, так должно быть?

P.s если в index.blade.php в js написать что-то вроде этого, то поведение точно такое же: после ctrl+f5 выводит токен, а после простой перезагрузки страницы абсолютно ничего в консоль не выводится

console.log('{{csrf_token()}}');

БЛОГ НА HUSL

Laravel csrf_token() пропадает после перезагрузки. Должно ли так быть?

Ответы (0 шт):