search

sp1daTomm / SelectWave

A vote website
https://select-wave.vercel.app
2 stars 2 forks source link

Top事件與navbar已登入狀態 #12

Closed eee317 closed 7 months ago

eee317 commented 7 months ago

Top按鈕 需要往下滑才會顯示 最後使用 ref 鑲在 data- 上面，不確定這樣的做法是否ＯＫ，但結果是我們要的 🙈

Navbar 已經完成已登入、未登入的狀態顯示 但是未登入的時候會出現 401 的錯誤資訊，不確定是不是正常的

image
vercel[bot] commented 7 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
select-wave ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 28, 2024 3:35pm
select-wave-bixv ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 28, 2024 3:35pm
select-wave-vue ❌ Failed (Inspect) Feb 28, 2024 3:35pm
echocarriet commented 7 months ago
  1. 我這邊登出後 NavbarEl.vue 出現 GET https://select-wave-backend.onrender.com/api/auth/check 401 (Unauthorized) ，應該是因為 /api/auth/check 這支 API 會需要帶 token，但 token 又需要登入後才會產生，就 Error 了，還是可以詢問助教看看有沒有更好的解法 XD
  2. 在目前頁面時 navbar 選單可以加入 Active 狀態。

其他部分沒問題囉！

eee317 commented 7 months ago

@echocarriet 感謝，我有處理 401 的問題，往 token 的方向，找到問題了 加入是否有 token 的判斷式，然後登出時清除 token 應該就可以解決 401 的問題

active 也有加上樣式囉 但好像有影響到你那邊的後台頁面樣式？我沒有仔細看 > < 你再幫我確認一下，如果有需要調整再跟我說 在想可能是因為 to="xxx" 這邊的關係，有可能你那邊有樣式被加上 active?

echocarriet commented 7 months ago

@eee317 你的方式加上 active 我那邊出現全員啟動的狀況，而且沒有顯示設計稿中的橫槓 >< 錯誤

還是你要參考我後台 NavbarBackend.vue、 NavbarVote.vue 設定的方式：

  1. router > inde.js 加上 name:'About'。 (以 Avout頁面為例)。
  2. <router-link> 加上 :to="{ name: 'About' } 和 :class="[ isActive('About') ? 'active樣式': '非active樣式' "
  3. 元件定義一個 isActive 方法

這樣在當下頁面就會呈現 active 狀態。 正確顯示

eee317 commented 7 months ago

@echocarriet

image

上圖：tailwind.config.js 有加入 active 的樣式

@echocarriet 我看了一下，你後台那邊主要是因為有 :to="{ name: '' }" 為空值，就會被加入 active 的狀態了 加上我在 tailwind.config.js 有加入 active 的樣式，因此你那邊後台就吃到這個 active 樣式嚕

下圖： :to="{ name: '' }" 為空值

image

因為我這邊 NavbarEl.vue 已經照你的方式下去做，你的後台那邊還是一樣都是黃色的全員出勤，所以才有上面的推估，目前我自己這邊的頁面也會有一樣的情況，只是我都這樣寫 to="none" 所以狀態都還算正常 以上給你參考看看

navber 選擇到的頁面，顯示黃色底，已經有加入囉 感謝程式碼參考 :)

echocarriet commented 7 months ago

@eee317 我用你的方式測試後，還是會呈現 active 黃字狀態，囧。 我測試下面方式是目前我們雙方都可行的狀態，但要麻煩你那邊調整一下，感謝了：

eee317 commented 7 months ago

@echocarriet 我修正囉 不過可能要慢一點合併，有看到 @huan5678 那邊推的 PR 有放了登入登出狀態的項目

eee317 commented 7 months ago

@huan5678 我合併之後，發現使用手動登入，會先看到全白的後台 然後轉去首頁 navbar 會是登入狀態 但是只要 F5 重新整理後，navbar 就會判斷未登入 然後使用第三方登入的話，navbar 都是未登入狀態 > <

我在想，要不要改成判斷是否有 token，來覺定是否已燈入

另外目前點登出按鈕，是沒有作用的QQ 我已登入狀態點登出會彈出 401 錯誤 想確認這支 /api/auth/logout 應該沒問題？> < 還是我應該要帶入什麼值嗎？

eee317 commented 7 months ago

@echocarriet 士桓已經修正我上面說的問題囉 我這邊的修正應該也沒有再影響到你那邊的後台了 我在 DC 有 tag 你，怕你沒看到，這邊再 tag 一次，如果沒有問題的話，再麻煩協助合併，感恩

image