Một số câu hỏi liên quan đến Nuxtjs ( Vuejs)

Về câu hỏi 1 của em:

• localStorage là một đặc tả của HTML5, chứ không phải là một phần của Javascript. Tức nó chỉ tồn tại trên một số các trình duyệt có hỗ trợ mà thôi. Khi chạy ở phần server (nodejs), đương nhiên là sẽ không có biến nào là localStorage cả, nên đoạn code của em sẽ bị lỗi.
• Việc dùng if (process.browser) là để check xem đoạn code javascript đó đang được chạy ở phía server, hay phía client (browser), nhằm đảm bảo phần code liên quan đến localStorage chỉ chạy ở phía trình duyệt thôi, và nó là cần thiết bởi nếu bê đoạn code đó lên chạy ở phần server thì sẽ có lỗi, như em đã gặp phải

Về câu hỏi thứ 2 của em:

• Bình thường Laravel tự động check CSRF token là bởi vì các controller phía backend được chỉ định là phải làm thế. Xử lý logic check CSRF token được đặt ở trong app/Http/Middleware/VerifyCsrfToken.php (được kế thừa từ class Illuminate\Foundation\Http\Middleware\VerifyCsrfToken). Middleware này được mặc định add vào middleware group web (em có thể check nội dung trong file app/Http/Kernel.php). Nên tất cả các routes em khai báo mà có middleware group là web thì đều sẽ phải verify CSRF token, hay nói cách khác, để truy cập vào các route đó thì phía client phải submit CSRF token lên.
• Bên cạnh middleware group là web, Laravel còn có middleware group khác là api. Mặc định của api không có middleware CSRF. Cụ thể đoạn code của phần đó (trong file Kernel.php) như sau. Em có thể tham khảo thêm tại phần document về Middleware Groups trên website của Laravel

/**
 * The application's route middleware groups.
 *
 * @var array
 */
protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],

    'api' => [
        'throttle:60,1',
        'auth:api',
    ],
];

• Do đó, khi truy cập đến các route mà có middle group là api thì em không cần submit CSRF token lên, đó là lý do tại sao em có thể gọi trực tiếp từ POSTMAN mà không bị lỗi gì

Về câu 1, Nuxtjs thực chất chạy ở cả Client và Server. process.browser là một field của webpack để check xem hiện tại nuxt đang chạy trên Node hay là Broswer. Nếu field kia trả về true thì nghĩa là đang chạy trên Browser,do đó tất nhiên ta có thể sử dụng được localStorage thui.

Còn về câu 2, thì theo mình được biết CSRF hay CORS là do cơ chế của trình duyệt để bảo vệ tránh trường hợp request đến một domain khác thui. Postman là dev tool nên loại bỏ cơ chế này nên có thể request bình thường.

Câu hỏi 2: Với Vuejs ở file resources/js/bootstrap.js đã có config mặc cho csrf rùi nên nếu bạn không sửa file này thì mặc định axios đã có csrf trong mỗi request

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}