VueRouter-localStorage在URL中未添加斜杠时被清除

Question

我使用localStorage来存储JWT令牌。

当我去https://www.example.com/my-web-app/，我可以在开发人员工具中看到JWT令牌-->应用当我去https://www.example.com/my-web-app，localStorage中没有可见的数据。

这意味着，如果应用程序的用户没有在URL中添加斜杠，则必须反复登录。有人知道原因在哪里吗？

依赖项

{
"vue": "^2.6.11",
"vue-router": "^3.1.5"
}

VueRouter配置：

{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/:catchAll(.*)',
name: 'NotFound',
component: NotFound
}

htaccess配置(位于/my web应用程序中(

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /my-web-app/
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /my-web-app/index.html [L]
</IfModule>

Answer 1

您可以创建一个实用程序函数，当不是时，该函数会在每条路由上自动添加尾部斜线

util.js

export function trailingSlash (str) {
return str.endsWith('/') ? str : str + '/'
}

在路由器文件中，router/index.js

import { trailingSlash } from 'util.js'
...
...
router.beforeEach((to, from, next) => {
return to.path.endsWith('/') ? next() : next(trailingSlash(to.path))
})

将在url的末尾添加一个尾随斜杠。