Nuxt.js是一個建立在Vue.js基礎(chǔ)上的服務(wù)端渲染框架攒暇。它非常易于上手并且可以讓你在幾分鐘內(nèi)構(gòu)建你的應(yīng)用。
服務(wù)端渲染是一個解決所有SPA的SEO問題的偉大解決方案子房，但不幸的是它帶來了另一個問題：權(quán)限驗證成了另一個項目管理中的痛點形用。
Nuxt.js官網(wǎng)提供了一個稱為“路由鑒權(quán)”的示例(https://nuxtjs.org/examples/auth-routes)。它展示了如何通過一個中間件來限定一個頁面是否可訪問证杭，但是這個檢查是在客戶端的進行的并且服務(wù)端渲染出的內(nèi)容無論是否進行權(quán)限驗證都是一樣的田度。
那么我們?nèi)绾卧诜?wù)端渲染一個特定的內(nèi)容呢？這里有一個解決方案解愤！
服務(wù)端渲染通常是這樣進行的：客戶端發(fā)起一個請求镇饺，例如訪問“/articles/page/1”，服務(wù)端渲染框架訪問一個返回JSON數(shù)據(jù)的API然后生成頁面并將其發(fā)送至客戶端送讲。
我們在這個過程中缺少的是指定一個token或者其他什么來進行權(quán)限驗證的過程奸笤。或許一個包含權(quán)限token的Cookie是一個好辦法哼鬓，它能在頭部被讀取监右，因此我們的服務(wù)端渲染框架能傳遞它或是把它發(fā)送到API。
首先我們要創(chuàng)建兩個插件：
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發(fā)送帶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) {}
}
}
}
