Nuxt服務端請求及獲取Cookie

介紹

nuxt.js是基於Vue的應用框架，它預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置。它提供了一個asyncData方法可用於在服務端里異步的獲取數據，它可以在頁面組件每次加載前被調用。

 

使用

這里使用的是typescript的方式，asyncData方法獲取到數據后會填充到data中，且asyncData方法在vue組件實例化之前被調用，因此無法獲取到實例this。

方式一：使用axios

import axios from 'axios'
import { Component, Vue, } from "nuxt-property-decorator";
@Component({
  asyncData(context: any): Promise <any> {
            return axios.get('http://test-api/get/data').then(res => {
            return {title: res.data.title, list: res.data.list}
      })
  },
})
export default class Index extends Vue {}

 

方式二：使用async\await

import axios from 'axios'
import { Component, Vue, } from "nuxt-property-decorator";
@Component({
  async asyncData(context: any): Promise <any> {
            let {data} = await axios.get('http://test-api/get/data');
      return {title: data.title, list: data.list}
  },
})
export default class Index extends Vue {}

 

上面就是asyncData部分的使用方式，當頁面第一次加載時會在服務端請求數據並填充到頁面的data中。

 

獲取Cookie

因為asyncData是會在服務端調用的，因此它無法和瀏覽器一樣去獲取Cookie，但是asyncData中的第一個參數是一個上下文對象，它在服務端調用時，我們可以訪問用戶請求的req和res對象，因此我們也可以通過它來獲取我們對應的Cookie信息。

import axios from 'axios'
import { Component, Vue, } from "nuxt-property-decorator";
@Component({
  async asyncData(context: any): Promise <any> {
     let params = {
             name: 'tom',
        age: 20,
        token: '',
     };
        // 可以使用process.server檢查是否在服務器端  
      if (process.server) {
        if (context.req && context.req.headers !== undefined) {
          // 獲取Cookies信息
          let cookieArr = context.req.headers.cookie;
          if (!params.token) {
            params.token = getCookie('token', cookieArr)
          }
        }
      }

            let {data} = await axios.post('http://test-api/post/data', params);
      return {title: data.title, list: data.list}
  },
})
export default class Index extends Vue {}




 //獲取對應cookie方法
 function getCookie (name: string, strCookie: any) {
  let arrCookie = strCookie.split(';');
  let cookie = arrCookie.find(item => item.split('=')[0] === name);
  return cookie ? cookie.split('=')[1] : '';
}

 

結語

使用asyncData方法時需要注意上下文對象的一些參數是否可用，因為它同時應用在兩個端，所以需要對一些參數進行判斷之后在使用。