浅谈在koa2中实现页面渲染的全局数据


Posted in Javascript onOctober 09, 2017

最近用koa2做一个项目的web端,遇到一个场景。

该项目主要用的是传统的服务端渲染的方式,所以会用 koa-views 去做页面的渲染工作。实现方式就是 ctx.render('path',data),那么,有如下场景,每个页面都需要去验证是否登录,登录了要返回页面个人数据,这个情况,怎么办呢?我不想每次都去手动的加入个人数据啊。例如这样:

let data = {
      "user":"12",
      "questionList":questionList
    };
    await ctx.render("index",data);

此处的user就是每个页面都是要返回的数据。

很显然,每个页面都要获得的数据,用中间件去获取,类似java的拦截器,过滤器之类的了。

import {UserClient} from "../manager/user/UserClient";
export const signInStatusMiddleware = async (ctx:any,next:any)=>{
  console.log("signInStatusMiddleware")
  let accessToken = ctx.cookies.get("ACCESS-TOKEN");
  if(accessToken){
    let userClient :UserClient = new UserClient;
    let user = await userClient.getUserByToken(accessToken);
  }
  await next();
}

OK,中间件中已经拿到了用户数据了,那么,问题来了。数据是可以拿,怎么放呢?

找到koa-views 源码。有如下代码:

return function views(ctx, next) {
  if (ctx.render) return next()

  ctx.render = function(relPath, locals = {}) {
   return getPaths(path, relPath, extension).then(paths => {
    const suffix = paths.ext
    const state = Object.assign(locals, options, ctx.state || {})
    // deep copy partials
    state.partials = Object.assign({}, options.partials || {})
    debug('render `%s` with %j', paths.rel, state)
    ctx.type = 'text/html'

    if (isHtml(suffix) && !map) {
     return send(ctx, paths.rel, {
      root: path
     })
    } else {
     const engineName = map && map[suffix] ? map[suffix] : suffix

     const render = engineSource[engineName]

     if (!engineName || !render)
      return Promise.reject(
       new Error(`Engine not found for the ".${suffix}" file extension`)
      )

     return render(resolve(path, paths.rel), state).then(html => {
      ctx.body = html
     })
    }
   })
  }

  return next()
 }

关键是这一段

const state = Object.assign(locals, options, ctx.state || {})

很显然,state 是将传入的数据,合并了,中间件配置的options ,和ctx.state的。中间件显式配置显然部合适,所以,做法是,在拦截器中间件中,把user赋值给ctx.state.

export const signInStatusMiddleware = async (ctx:any,next:any)=>{
  console.log("signInStatusMiddleware")
  let accessToken = ctx.cookies.get("ACCESS-TOKEN");
  if(accessToken){
    let userClient :UserClient = new UserClient;
    let user = await userClient.getUserByToken(accessToken);
    ctx.state = Object.assign(ctx.state,{"user":user});
  }
  await next();
}

ok。这样一来,在页面渲染的时候,就会带上用户信息了。而不需要再在各处去自己手动添加。

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

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
ES6学习教程之模板字符串详解
Oct 09 #Javascript
ES6学习教程之块级作用域详解
Oct 09 #Javascript
JavaScript实现短信倒计时60s
Oct 09 #Javascript
ES6学习教程之对象字面量详解
Oct 09 #Javascript
AngularJS中的路由使用及实现代码
Oct 09 #Javascript
You might like
PHP多线程抓取网页实现代码
2010/07/22 PHP
php实现aes加密类分享
2014/02/16 PHP
jquery 学习笔记一
2010/04/07 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
JavaScript进制转换实现方法解析
2020/01/18 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
简单实现python爬虫功能
2015/12/31 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
工程招投标邀请书
2014/01/26 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年节能工作总结
2014/12/18 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
iPhone13再次曝光
2021/04/15 数码科技
python 用递归实现通用爬虫解析器
2021/04/16 Python
python 命令行传参方法总结
2021/05/25 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android