DDR爱好者之家

Nuxt.js SSR与权限验证的实现
站长资源 2024/11/25 佚名
11 1538
DDR爱好者之家 Design By 杰米

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) {}
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米