這個(gè)不應(yīng)該是前端考慮的問(wèn)題，前端管理非常不安全

后端給你一個(gè)token（就是一個(gè)個(gè)字符串），你保存起來(lái)就是了（cookie 和 localStorage 隨意 或者其他位置）。你每次請(qǐng)求把這個(gè)token發(fā)送給后端就完事。
至于驗(yàn)證這個(gè)token是否可用？是否過(guò)期？是后端的事情。
這個(gè)token的算法，token的表示的含義，也是后端的事情。
前端當(dāng)成一個(gè)標(biāo)示處理就好了。

首先，是登錄信息：

登錄信息存在 cookie 中是一直以來(lái)的做法，而且實(shí)現(xiàn)的很好，不用考慮各種問(wèn)題。
而 localStorage 是在這個(gè) API 誕生之后，一些 JS 黨帶起來(lái)的另一種實(shí)現(xiàn)方式。

使用 localStorage，你需要在每次請(qǐng)求的時(shí)候，都手動(dòng)帶上這個(gè)信息，這大大增加了開(kāi)發(fā)過(guò)程中帶來(lái)的困難，非常麻煩，而且還要手動(dòng)維護(hù)過(guò)期時(shí)間。
而使用 cookie 的話，只需要在后端的 Auth 模塊放個(gè)設(shè)置 header 的代碼即可，其他完全不用考慮。為什么：

• 用戶未登錄的情況下，Auth 判斷沒(méi)有權(quán)限，設(shè)置個(gè)跳轉(zhuǎn)到登錄頁(yè)（或者是其他邏輯，比如以訪客身份瀏覽之類的）
• 用戶登錄時(shí)：將賬號(hào)和密碼 POST 到 Auth 模塊后，Auth 設(shè)置一個(gè) header，設(shè)置 Cookie 及過(guò)期時(shí)間
• 用戶登錄后，在 Cookie 的有效期內(nèi)（設(shè)置了過(guò)期時(shí)間就是過(guò)期時(shí)間內(nèi)，沒(méi)設(shè)置就是瀏覽器關(guān)閉前），任何請(qǐng)求都會(huì)自動(dòng)帶上 cookie，完全不用人工干預(yù)（fetch 請(qǐng)求除外，需要額外指定配置）
• 在用戶自動(dòng)帶上 cookie 請(qǐng)求后，需要授權(quán)的請(qǐng)求一定會(huì)經(jīng)過(guò) Auth 模塊，判斷 cookie 是否有效（防止惡意無(wú)效的 cookie），若 cookie 無(wú)效，則設(shè)置 header 刪除 cookie（可選步驟），并將用戶重定向到登錄頁(yè)。若 cookie 有效，則設(shè)置 header，為 cookie 續(xù)期（cookie 內(nèi)容都可以完全不變）。

Auth 模塊：
if (POST 方法請(qǐng)求登錄) {
  if (賬號(hào)密碼不正確) {
    return 重定向到登錄頁(yè)面，并提示錯(cuò)誤
  }
  設(shè)置 cookie，并指定過(guò)期時(shí)間為當(dāng)前時(shí)間 +n 天
  return Auth 模塊邏輯結(jié)束，進(jìn)入其他模塊邏輯
}
if (沒(méi)有 cookie) {
  return 重定向到登錄頁(yè)面
}
if (cookie 無(wú)效) {
  // 可選步驟：設(shè)置 cookie 過(guò)期時(shí)間為 -1 （刪除 cookie）
  return 重定向到登錄頁(yè)面
}
// 帶了有效的 cookie
設(shè)置 cookie 過(guò)期時(shí)間為當(dāng)前時(shí)間 +n 天（為 cookie 續(xù)期）
return Auth 模塊邏輯結(jié)束，進(jìn)入其他模塊邏輯

注意：只有請(qǐng)求 Auth 模塊才會(huì)給 cookie 續(xù)期，其他模塊不續(xù)。所以權(quán)限認(rèn)證的模塊都統(tǒng)一到一起了。
前端 js 什么都不用管，后端其他模塊也什么都不用管。

然后是樓主的問(wèn)題：

登錄/設(shè)置密碼：這是兩個(gè)模塊，不能搞混概念！然后有一個(gè)權(quán)限管理模塊（Auth）來(lái)管理。
首先，必須要用戶登錄才能操作，這里不管你把登錄信息存儲(chǔ)到哪里。
登錄成功后，有兩種選擇：

1. 跳到首頁(yè)，然后判斷沒(méi)有設(shè)置密碼，跳到設(shè)置密碼頁(yè)
2. 直接判斷是否設(shè)置密碼，跳轉(zhuǎn)到密碼頁(yè)。如果沒(méi)有設(shè)置密碼，強(qiáng)行進(jìn)入主頁(yè)，又需要判斷然后跳到設(shè)置密碼頁(yè)。

可以看出來(lái)，首頁(yè)中判斷是否設(shè)置了密碼是必須的，而登錄頁(yè)不是。
那么，將判斷代碼放在首頁(yè)，登錄成功后進(jìn)入首頁(yè)，首頁(yè)判斷沒(méi)有設(shè)置密碼再跳到設(shè)置頁(yè)，設(shè)置成功后，再跳轉(zhuǎn)到首頁(yè)。這個(gè)邏輯沒(méi)有問(wèn)題，也不會(huì)出現(xiàn)重復(fù)登錄的問(wèn)題。

首頁(yè)：
if (未登錄) {
  return 跳轉(zhuǎn)到登錄頁(yè);
}
if (未設(shè)置密碼) {
  return 跳轉(zhuǎn)到設(shè)置密碼頁(yè);
}
// 已成功登錄并設(shè)置密碼，顯示頁(yè)面。
---------------------------------
登錄頁(yè)：
if (已登錄) {  // 防止用戶將登錄頁(yè)加入書(shū)簽，或者由于某些原因在已登錄的情況下進(jìn)入登錄頁(yè)
  return 跳轉(zhuǎn)到首頁(yè);
}
// 未登錄，顯示登錄頁(yè)
登錄成功后直接跳回首頁(yè)。
---------------------------------
設(shè)置密碼頁(yè)：
if (已設(shè)置密碼) {
  顯示修改密碼頁(yè)
} else {
  顯示設(shè)置密碼頁(yè)
}
設(shè)置成功后直接跳回首頁(yè)。

我不知道樓主設(shè)置密碼后為什么會(huì)跳轉(zhuǎn)到登錄頁(yè)面？既然已經(jīng)登錄了，在設(shè)置密碼后應(yīng)該直接跳回首頁(yè)?。窟@應(yīng)該是其他方面的邏輯問(wèn)題，而不是登錄信息存儲(chǔ)方式的問(wèn)題吧？

最后補(bǔ)充一點(diǎn)：關(guān)于什么時(shí)候用 cookie，什么時(shí)候用 ***Storage

注：上面的 ***Storage 包括了 localStorage 和 sessionStorage。

• Cookie:
  Cookie 存儲(chǔ)的數(shù)據(jù)量比較小，所以一般不會(huì)存大量數(shù)據(jù)。當(dāng)你存儲(chǔ)的內(nèi)容在每次請(qǐng)求后端的時(shí)候都需要的情況下才需要放到 Cookie 中。比如登錄信息、設(shè)置信息之類的。
  登錄信息不用我說(shuō)吧？肯定每次請(qǐng)求都要帶上。
  設(shè)置信息，一般比如網(wǎng)站語(yǔ)言（中文、英文之類的），或其他要求后端動(dòng)態(tài)渲染的設(shè)置。
• ***Storage:
  這個(gè)是新的 API，一般用于在前端緩存一些數(shù)據(jù)時(shí)使用，這些數(shù)據(jù)一般是只在前端使用，而后端不使用的，所以不用每次都往后端發(fā)送。（或是前端做統(tǒng)計(jì)，后端只要一個(gè)統(tǒng)計(jì)結(jié)果之類的）
  比如一些網(wǎng)站提供的編輯器，自帶草稿功能，每隔幾秒鐘或幾分鐘自動(dòng)保存當(dāng)前編輯的內(nèi)容，刷新頁(yè)面，或是把瀏覽器關(guān)掉重新打開(kāi)編輯頁(yè)面可以自動(dòng)恢復(fù)之前編輯的內(nèi)容的。
  這種信息就適合存放在 ***Storage 中。

還有其他的比如 web SQL、IndexedDB 兩個(gè)數(shù)據(jù)庫(kù)，這一般是用來(lái)做 HTML 5 應(yīng)用的時(shí)候才會(huì)用到的。比如 PWA 或是 HTML5 頁(yè)游之類的。（貪玩藍(lán)月跟這沒(méi)關(guān)系(╯‵□′)╯︵┻━┻）

最后說(shuō)一句：所有邏輯全部都放到前端判斷是非常錯(cuò)誤的決定！

因?yàn)椋呵岸说囊磺卸际强梢允指牡陌。?br>不管是 cookie、localStorage 還是 sessionStorage，只要用戶按下 F12，分分鐘手改??！
這個(gè)網(wǎng)站要登錄？打開(kāi) F12，輸入 document.cookie='isLoggedIn=true'; 或者 localStorage.setItem('loggedIn', 'true');，你就，登錄成功？？？喵喵喵？
要設(shè)置密碼？同樣打開(kāi) F12 設(shè)置點(diǎn)東西。
這些判斷放在前端是完全沒(méi)有意義的啊喂！因?yàn)槟悴还芮岸伺袛嗖慌袛?，都要過(guò)一遍后端判斷才行啊?。?！

充分利用前端，也不能濫用啊喂！??！(╯‵□′)╯︵┻━┻

P.S. 當(dāng)然，這里我就不提 CSP 之類的網(wǎng)站安全規(guī)則了。。。又扯遠(yuǎn)了。。。

localStorage慎用。類似于密碼是否設(shè)置這類標(biāo)識(shí)位，為什么會(huì)存到前端來(lái)?。窟@個(gè)不是應(yīng)該實(shí)時(shí)從后端去獲取嗎？假如首次登陸成功后是密碼未設(shè)置的狀態(tài)，然后關(guān)閉瀏覽器，但是客戶從其他別的渠道設(shè)置了密碼，存到了localStorage的話，客戶再次進(jìn)入的時(shí)候不是還會(huì)再跳轉(zhuǎn)到密碼設(shè)置的頁(yè)面嗎？

一般都會(huì)加鹽，加解密敏感數(shù)據(jù)的。前端既然要敏感數(shù)據(jù)， 那你的數(shù)據(jù)就得用簽名算法加密然后再加上鹽。這樣能大幅度的確保數(shù)據(jù)的安全。

為什么不把支付設(shè)置頁(yè)放到主頁(yè)里面？

你的需求可以拆成兩個(gè)部分：認(rèn)證 和 鑒權(quán)
認(rèn)證識(shí)別這個(gè)用戶的身份
鑒權(quán)確定這個(gè)用戶訪問(wèn)首頁(yè)之后是否需要跳轉(zhuǎn)到綁定支付頁(yè)面

cookie 天生就是最適合做認(rèn)證，除了你提出的能否設(shè)置過(guò)期時(shí)間上的區(qū)別， cookie 和 localStorage 最大的區(qū)別是：每次 request 都會(huì)自動(dòng)在 header 中帶上所有的 cookie。所以如果你為了鑒權(quán)，設(shè)置很多 cookie ，還會(huì)引發(fā)一個(gè)問(wèn)題就是，每次 request 的包都會(huì)很大。

我的解決方案很簡(jiǎn)單：鑒權(quán)就應(yīng)該交給后端去做。無(wú)論你多么細(xì)心的在 client 中維護(hù)用戶權(quán)限標(biāo)識(shí)，都需要確保一點(diǎn)：用戶的真實(shí)權(quán)限是否保持同步？所以你還是需要向后端查詢用戶權(quán)限設(shè)置，干嘛不簡(jiǎn)單些：
用戶認(rèn)證之后，后端鑒權(quán)，提示是否跳轉(zhuǎn)，或者干脆在 header 頭中設(shè)置跳轉(zhuǎn)鏈接。

你要先分清客戶端與服務(wù)端對(duì)“是否已登錄”的判斷是否一致？ 如果不一致，就肯定會(huì)出現(xiàn) “訪問(wèn)頁(yè)面時(shí)是已登錄，但提交請(qǐng)求到服務(wù)器又返回未登錄”的情況。

如果這兩者對(duì)“是否登錄”的判斷是一致的，那無(wú)論你是用cookie,localstore,甚至是其它你任何能想到的辦法都不會(huì)有問(wèn)題。

你說(shuō)的情況，登錄成功后關(guān)掉瀏覽器三天后再訪問(wèn)登錄頁(yè)顯示已登錄，而提交設(shè)置支付密碼時(shí)服務(wù)端又提示未登錄，實(shí)際上就是服務(wù)端的與客戶端對(duì)登錄是否有效的判斷不一致，像這種情況, 你又不想提交業(yè)務(wù)請(qǐng)求后再返回未登錄

簡(jiǎn)單的做法，就是打開(kāi)任一頁(yè)面之前（比如vue的路由before），先判斷token是否有效（簡(jiǎn)單的判斷就是服務(wù)端生成token時(shí)增加過(guò)期時(shí)間加到token中，如果要確保登錄態(tài)一致，那就向服務(wù)端查詢）,無(wú)效就是未登錄，跳到登錄頁(yè)。

你都列的那么清楚了，還有什么好糾結(jié)。
不過(guò)期：localStorage或cookie
有過(guò)期，區(qū)分下：

關(guān)閉即失效，用sessionStorage
關(guān)閉過(guò)段時(shí)間失效，用cookie，畢竟localStorage要自己手動(dòng)刪

沒(méi)有什么最佳方案，只有最合適的方案，localStorage、sessionStorage、cookie各有所長(zhǎng)

保存在cookie里面有一個(gè)很大的好處就是發(fā)送請(qǐng)求自動(dòng)帶上登錄信息 如果你發(fā)現(xiàn)這個(gè)好處都不夠的話 你可以考慮存ls

建議登陸信息用 cookie。即設(shè)置過(guò)期時(shí)間的cookie ，看法是 cookie 默認(rèn)會(huì)發(fā)送回到后端，這樣方便后端讀取， 而localStorage的話必須你自己實(shí)現(xiàn)傳送到后端（一般由前端js實(shí)現(xiàn)）。
另外， cookie有時(shí)效，而localStorage如果不手動(dòng)清理則永久保存。
如果要設(shè)置關(guān)閉網(wǎng)頁(yè)/標(biāo)簽就失效， 請(qǐng)用SessionStorage。 這個(gè)類似你設(shè)置“不帶時(shí)間的cookie”。