浅谈在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点击更换背景颜色或图片的实例代码
Jun 25 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
js实现加载更多功能实例
Oct 27 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
个人小程序接入支付解决方案
May 23 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 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中路径问题的解决方案
2006/10/09 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
JavaScript Accessor实现说明
2010/12/06 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python使用turtle绘制分形树
2018/06/22 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
python中threading开启关闭线程操作
2020/05/02 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
自荐书格式
2013/12/01 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
结婚保证书范文
2014/04/29 职场文书
大学生安全责任书
2014/07/25 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
代码复现python目标检测yolo3详解预测
2022/05/06 Python