iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
Modern Web

每日挖個坑,用坑填起耍廢聊天室!系列 第 28

二十八號坑,阻擋直接用網址進來的傢伙-asyncData&fetch

目前聊天室有單獨設立一個router,進來到此頁有兩個方法:

  1. 首頁輸入暱稱後導入/chat
  2. 直接輸入網址localhost:3000/chat

但因為必須要登入才會有使用者資料,所以要避免有人直接輸入網址進入聊天室造成錯誤,所以一進到此頁就要判斷是否有登入,如果沒有登入資料,就將他重新導向到首頁。

一般用Vue可能會在createdmounted的時候做驗證,不過在這些生命週期中做驗證會有一個問題,就是已經進入到此頁,頁面也可能已經渲染出來,這時候才判斷完沒有登入並且導頁,就會有畫面閃動的狀況,這時候用Nuxt裡的asyncData或是fetch就可以解決這個問題。

asyncData是在vue被建立前調用的屬性,所以無法在裡面使用this,也就是說,在vue裡面設定的data、method通通都不能用,但可以拿到context,取得一些可以用的屬性,列一些我比較常用到的,其他可以看官網(誒)。

  • app:可以使用plugin,像是可以用有設定好的$socket、$axios
  • store:可以拿Vuex的資料
  • route:可以取得Vue Router
  • params:可以取得Router上的params
  • query:可以取得Router上的query
  • redirect:重新導頁

asyncData跟fetch主要的差別在於,asyncData會return資料,fetch不會。

舉例來說,有時候我們會在page頁打api,拿回來的資料會需要在vue用,所以使用asyncData將api資料return,return的資料直接灌到vue裡面,就可以直接使用。

那如果說,習慣從Vuex打api,然後page再從Vuex裡取資料,這樣就可以改用fetch,或是像我目前只是要在進來頁面的時候判斷是否有登入,不需要回傳資料,那也是用fetch就可以了。

Nuxt也是依靠asyncData和fetch來做Server Side Render
另外asyncData傳出去的資料都會被處理過,所以是不能傳function出去的


驗證是否登入

asyncData和fetch只能在pages裡做,目前要擋的是pages > chat這頁,在fetch中會用到幾個項目:

  • store取的loginData驗證是否存在
  • redirect在確定沒登入後導回首頁
<script>
export default {
    fetch({ store, redirect }) {
      if (!store.state.loginData.memberId) {
        redirect('/')
      }
    }
}
</script>

如此這般,就可以測試在直接輸入localhost:3000/chat會不會直接被彈去首頁嚕~d(`・∀・)b


上一篇
二十七號坑,來做多個聊天頻道之三(socket事件篇)
下一篇
二十九號坑,跟socket說掰掰-disconnect
系列文
每日挖個坑,用坑填起耍廢聊天室!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言