Nuxt.js SSR与权限验证的实现


Posted in Javascript onNovember 21, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 #Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 #Javascript
Angular刷新当前页面的实现方法
Nov 21 #Javascript
详解ES6系列之私有变量的实现
Nov 21 #Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 #Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 #Javascript
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
dedecms模版制作使用方法
2007/04/03 PHP
php中smarty区域循环的方法
2015/06/11 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
Python 深入理解yield
2008/09/06 Python
python中遍历文件的3个方法
2014/09/02 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Python3 Random模块代码详解
2017/12/04 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python实现UDP协议下的文件传输
2020/03/20 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
什么是抽象
2015/12/13 面试题
大四学年自我鉴定
2013/11/13 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
python热力图实现的完整实例
2022/06/25 Python