Nuxt.js SSR與權限驗證的實現(xiàn)
更新時間：2018年11月21日 10:36:22 作者：DelphinWU
這篇文章主要介紹了Nuxt.js SSR與權限驗證的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
Nuxt.js是一個建立在Vue.js基礎上的服務端渲染框架。它非常易于上手并且可以讓你在幾分鐘內構建你的應用。
服務端渲染是一個解決所有SPA的SEO問題的偉大解決方案，但不幸的是它帶來了另一個問題：權限驗證成了另一個項目管理中的痛點。
Nuxt.js官網提供了一個稱為“路由鑒權”的示例(https://nuxtjs.org/examples/auth-routes)。它展示了如何通過一個中間件來限定一個頁面是否可訪問，但是這個檢查是在客戶端的進行的并且服務端渲染出的內容無論是否進行權限驗證都是一樣的。
那么我們如何在服務端渲染一個特定的內容呢？這里有一個解決方案！
服務端渲染通常是這樣進行的：客戶端發(fā)起一個請求，例如訪問“/articles/page/1”，服務端渲染框架訪問一個返回JSON數(shù)據(jù)的API然后生成頁面并將其發(fā)送至客戶端。
我們在這個過程中缺少的是指定一個token或者其他什么來進行權限驗證的過程。或許一個包含權限token的Cookie是一個好辦法，它能在頭部被讀取，因此我們的服務端渲染框架能傳遞它或是把它發(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) {}
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了VUE實現(xiàn)彈出框點擊空白頁彈框消失,實現(xiàn)方法可以在Vue中實現(xiàn)彈出框然后通過點擊空白頁面來讓彈窗隱藏,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12
node.js開發(fā)輔助工具nodemon安裝與配置詳解
node.js代碼修改后，需要重新啟動 Express 應用，所做的修改才能生效。若之后的每次代碼修改都要重復這樣的操作，勢必會影響開發(fā)效率，本文將詳細介紹Nodemon，它會監(jiān)測項目中的所有文件，一旦發(fā)現(xiàn)文件有改動，Nodemon 會自動重啟應用2020-02-02
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了詳解vantUI框架在vue項目中的應用踩坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue前端開發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關于vue可視化表單設計器自定義組件使用的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue頭像處理方案，實現(xiàn)思路主要是通過獲取后臺返回頭像url，判斷圖片寬度，高度。具體實例代碼大家參考下本文2018-07-07
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易折疊面板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue項目首次打開時加載速度很慢的優(yōu)化過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue+element實現(xiàn)錨點鏈接方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07