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中length属性的探索
Jul 31 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
Vuex的实战使用详解
Oct 31 Javascript
js实现无缝轮播图
Mar 09 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php 接口类与抽象类的实际作用
2009/11/26 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
深入理解Vue nextTick 机制
2018/04/28 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
Python自动发邮件脚本
2017/03/31 Python
详解python中的文件与目录操作
2017/07/11 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python如何建立全零数组
2020/07/19 Python
python的链表基础知识点
2020/09/13 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
运动会100米解说词
2014/01/23 职场文书
论文评语大全
2014/04/29 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
js基础语法与maven项目配置教程案例
2021/07/15 Javascript