Nuxt.js是一個建立在Vue.js基礎上的服務端渲染框架。它非常易于上手并且可以讓你在幾分鐘內構建你的應用。

服務端渲染是一個解決所有SPA的SEO問題的偉大解決方案，但不幸的是它帶來了另一個問題：權限驗證成了另一個項目管理中的痛點。

Nuxt.js官網提供了一個稱為“路由鑒權”的示例(https://nuxtjs.org/examples/auth-routes)。它展示了如何通過一個中間件來限定一個頁面是否可訪問，但是這個檢查是在客戶端的進行的并且服務端渲染出的內容無論是否進行權限驗證都是一樣的。

那么我們如何在服務端渲染一個特定的內容呢？這里有一個解決方案！

服務端渲染通常是這樣進行的：客戶端發起一個請求，例如訪問“/articles/page/1”，服務端渲染框架訪問一個返回JSON數據的API然后生成頁面并將其發送至客戶端。

我們在這個過程中缺少的是指定一個token或者其他什么來進行權限驗證的過程。或許一個包含權限token的Cookie是一個好辦法，它能在頭部被讀取，因此我們的服務端渲染框架能傳遞它或是把它發送到API。

首先我們要創建兩個插件：

import axios from 'axios'let options = {};if (process.SERVER_BUILD) { options.baseURL = `http://api:3030`}let ax = { options, create: (token) => { options.headers = {  Authorization: token } return axios.create(ax.options) }} export default ax

這個插件能讓我們通過Axios發送帶token的請求。

const getCookie = function(cname, req) { let name = cname + "=" let decodedCookie if (typeof window === 'undefined') decodedCookie = decodeURIComponent(req.headers.cookie) else decodedCookie = decodeURIComponent(document.cookie) let ca = decodedCookie.split(';') for(let i = 0; i <ca.length; i++) {  let c = ca[i]  while (c.charAt(0) == ' ') {   c = c.substring(1)  }  if (c.indexOf(name) == 0) {   return c.substring(name.length, c.length)  } } return ""}export default getCookie

這一個插件則是從Cookie中獲取token。

接下來你就能在一個“async fetch”方法中簡單地使用它們：

import axios from '~plugins/axios'import getCookie from '~plugins/getCookie'export default { async fetch ({ store, isServer, req, redirect }) {  if(isServer) {   const ax = axios.create(getCookie('token', req))   try {    let { data } = await ax.get('/populate')    if(data.store && data.store.user) store.commit('user/setData', data.store.user)    else redirect('/login')   } catch(e) {}  } }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。