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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
js判断变量是否空值的代码
Oct 26 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
JavaScript实现tab栏切换效果
Mar 16 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
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
详解python中sort排序使用
2019/03/23 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python 爬虫请求模块requests详解
2020/12/04 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
软件测试面试题
2015/10/21 面试题
文秘档案管理岗位职责
2014/03/06 职场文书
个人求职自荐信范文
2014/06/20 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Python Socket编程详解
2021/04/25 Python
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers