make "CSRF token mismatched" error friendly

app/Exceptions/Handler.php

@@ -18,6 +18,7 @@ class Handler extends ExceptionHandler
         \Symfony\Component\HttpKernel\Exception\HttpException::class,
         \Illuminate\Database\Eloquent\ModelNotFoundException::class,
         \Illuminate\Validation\ValidationException::class,
+        \Illuminate\Session\TokenMismatchException::class,
         PrettyPageException::class,
     ];
 

resources/assets/src/scripts/net.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { emit } from './event'
 import { queryStringify } from './utils'
 import { showModal } from './notify'
-import { trans } from './i18n'
+import { trans, t } from './i18n'
 
 export interface ResponseBody<T = null> {
   code: number
@@ -62,6 +62,12 @@ export async function walkFetch(request: Request): Promise<any> {
         code: 1,
         message: Object.keys(errors).map(field => errors[field][0])[0],
       }
+    } else if (response.status === 419) {
+      showModal({
+        mode: 'alert',
+        text: t('general.csrf'),
+      })
+      return
     } else if (response.status === 403) {
       showModal({
         mode: 'alert',

resources/assets/tests/scripts/net.test.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import * as net from '@/scripts/net'
 import { on } from '@/scripts/event'
-import { trans } from '@/scripts/i18n'
+import { trans, t } from '@/scripts/i18n'
 import { showModal } from '@/scripts/notify'
 
 jest.mock('@/scripts/notify')
@@ -198,6 +198,16 @@ test('process backend errors', async () => {
       },
       clone: () => ({}),
     })
+    .mockResolvedValueOnce({
+      status: 419,
+      headers: new Map([['Content-Type', 'application/json']]),
+      json() {
+        return Promise.resolve({
+          message: 'CSRF token mismatched.',
+        })
+      },
+      clone: () => ({}),
+    })
     .mockResolvedValueOnce({
       status: 403,
       headers: new Map([['Content-Type', 'application/json']]),
@@ -229,6 +239,12 @@ test('process backend errors', async () => {
   expect(result.code).toBe(1)
   expect(result.message).toBe('required')
 
+  await net.walkFetch({ headers: new Headers() } as Request)
+  expect(showModal).toBeCalledWith({
+    mode: 'alert',
+    text: t('general.csrf'),
+  })
+
   await net.walkFetch({ headers: new Headers() } as Request)
   expect(showModal).toBeCalledWith({
     mode: 'alert',

resources/lang/en/front-end.yml

@@ -293,6 +293,7 @@ general:
   skinlib: Skin Library
   loading: Loading
   wait: Please wait...
+  csrf: This page is out-dated. Please refresh it.
   user:
     email: Email
     nickname: Nick Name

resources/misc/changelogs/en/5.0.0.md

@@ -42,6 +42,7 @@
 - Display 3D avatar of player when applying texture to player.
 - New "Plugins Management" page.
 - "Choose Player" Dialog won't be showed if no texture is selected at closet page.
+- Make "CSRF token mismatched" error friendly.
 
 ## Fixed
 

resources/misc/changelogs/zh_CN/5.0.0.md

@@ -42,6 +42,7 @@
 - 将材质应用到角色时显示角色的 3D 头像
 - 新的「插件管理」页面
 - 衣柜中未选择材质时点击「应用到角色」不弹出「选择角色」对话框
+- 使 "CSRF token mismatched" 的错误提示变得友好
 
 ## 修复