VueJS - 存储在 localStorage 中的身份验证令牌在 iPhone 上不起作用？

Question

我构建了一个使用 Token 进行授权的应用。用户登录并从后端获取令牌。该令牌存储在浏览器的 localStorage 中，然后用于对 API 的每次后续调用。如果令牌不存在或者是错误的令牌，调用将被拒绝并返回 401 - Unauthorized。

这在我的桌面浏览器上完美运行，但是当我尝试在我的 iPhone 上使用它时，一堆呼叫被拒绝为 401 - 未经授权 - 但并非所有呼叫都被拒绝。我将手机连接到笔记本电脑以进行 Safari 远程调试，我可以确认令牌位于本地存储中，并且它是正确的令牌。

不过，似乎有一种模式。我可以从我的手机更新现有条目，但我不能从我的手机创建新条目 - 这些被拒绝为 401。

我是否遗漏了有关 Vue 如何在移动设备上处理 localStorage 的内容？为什么它在 iPhone 上的运行方式与在浏览器上的运行方式不同？

我有点难过...

Answer 1

解决方案

事实证明，我的应用程序中的一些URLs 带有斜杠，而有些则没有。 URLs 没有 有斜杠，在我的手机上会失败，但在我的桌面上可以正常工作。我浏览了所有代码，并在各处添加了斜杠，现在一切正常。

var url = 'projects' <- works on desktop, returns 401 on phone
var url = 'projects/' <- works on desktop AND phone

Answer 2

不，是简短的回答。首先是让 Vue 脱离循环。 Vue 不访问本地存储，您的 js 可以。我能想到的唯一 Iphone 问题是安装在主屏幕上的应用程序不会与 safari 共享它们的上下文。我不认为这是你的问题。我真的怀疑这与 localStorage 有什么关系。

有许多方法可以逐个字符地检查发送到您的 api 的请求 - safari 开发工具、提琴手。爬过请求标头。特别注意大小写或空格的任何差异，当然尤其是 Auth 标头。问题出在某处盯着你看。