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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
jQuery冲突问题解决方法
Jan 19 jQuery
详解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
用php实现分页效果的示例代码
2020/12/10 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
js实现微信分享代码
2020/10/11 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python设置代理和添加镜像源的方法
2020/02/14 Python
执行Python程序时模块报错问题
2020/03/26 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
pandas的resample重采样的使用
2020/04/24 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
如何选择使用结构还是类
2014/05/30 面试题
Shell编程面试题
2012/05/30 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
推销搭讪开场白
2015/05/28 职场文书
小组组名及励志口号
2015/12/24 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python