小编Nic*_*eda的帖子

注意：我正在使用 Flexbox

当屏幕大小调整时，我使用“display:none”来删除一些随着尺寸缩小而不再适合的元素，但是一旦删除它们，仍然显示的元素将不再在其列中水平居中。

例如：（这不是代码，只是一个简单的说明）

|-------------------------------|
|       |       |       |       |
|  1 2  |  1 2  |  1 2  |  1 2  |
|-------|-------|-------|-------|  

例如：现在，在“2”元素具有属性“display：none”之后，剩下的内容不再水平居中。

|-------------------------------|
|       |       |       |       |
|  1    |  1    |  1    |  1    |
|-------|-------|-------|-------|  

当我缩小并删除元素“2”时，保持水平居中的正确方法是什么？

工具：Firebase

问题：完全客户端代码和公开唯一 ID 的安全性

我一直在绞尽脑汁地思考如何创建一个系统来唯一标识用户以进行基本的用户与用户交互。

常见示例 - 直接向朋友发送消息、添加新联系人等...

必须有一个唯一的 ID 传递给客户端才能建立这些类型的连接

我如此困惑的原因是因为在我看来，我不应该暴露任何用户的uid（出于安全原因，这似乎很粗略），因此我需要为用户提供多个唯一的id（一个用于一组，或者对于每个连接等）。

那么我错了吗，只要我设置安全规则就可以使用 uid 吗？我确信这个问题一定有一个超级简单的答案。

我想做什么：

我有点紧张，我需要能够找到多个形状的传单缩放级别，而无需创建地图实例并使用map.fitBounds().

我坚持的两种可能的解决方案：

1）我尝试制作模拟/临时地图以访问map.fitBounds()功能并模拟map.fitBounds()

- 但不起作用，因为地图需要实例化一个 div 容器。

2）我一直在寻找以编程方式计算传单缩放的方法。

- 我还没有找到任何关于如何做到这一点的资源。

如果您有任何策略可以帮助我将这些原始数据转换为他们的传单副本，那就太棒了！！

当我构建我的 React 应用程序时，一个有趣的好奇心：

我注意到我们如何在浏览器中使用客户端代码和/或资源。（例如更改 css、更改 html、更改 js 变量）。

这是否意味着我们也可以从浏览器操作商店的全局状态？

例如，如果正在执行客户端路由（所有客户端代码都在浏览器上）并且我们正在检查商店数据以查看用户是否已登录以允许路由 - 我们（或任何人）不能) 只是操纵商店状态以覆盖所需的登录名，然后在应用程序中四处走动？

我意识到这个例子可以在很多方面变得微不足道 - 但主要问题是客户端应用程序代码的全局状态是否可以在浏览器中触发不同的组件渲染，甚至渲染组件状态树的完全不同部分对于这个问题。

注意：请原谅任何可能暴露的重大无知迹象。哈哈。我只是不确定，我认为从开发和用户体验的角度来看，出于多种原因而了解会很有趣。

工具:JavaScript ES6

我还没有看到关于链接多个promises以按顺序执行的语法的简洁答案.我认为这对于所有承诺新手的棺材问题都是一个很好的指甲.:)

我的问题是我想以同步顺序调用它 getPosts--->getThreads--->initializeComplete()

这就是我在做的事情.

userPromise.then(getPostsPromise).then(getThreadsPromise).then(initializeComplete());

• userPromise是Promise obj我从代码的另一部分返回
• getPostsPromise返回一个Promise并向服务器提取帖子
• getThreadsPromise返回一个Promise并为服务器提取线程
• initializeComplete是一个回调,告诉我的程序它已初始化.

以下是链中一个承诺的示例:

var getPostsPromise = function(){
    //Firebase is just a simple server I'm using
    var firebasePostsRef = new Firebase("https://myfburl.firebaseio.com/posts");
    var postsRef = firebasePostsRef.child(localPlace.key);

    return new Promise(function(resolve, reject) {
      //Below is a Firebase listener that is called when data is returned
      postsRef.once('value', function(snap,prevChild) {
            var posts = snap.val();
            AnotherFile.receiveAllPosts(posts);
            resolve(posts);
        }); 
      });
}

但是initializeComplete()之前被召唤getPostsPromise并getThreadsPromise有机会完成抓取.

为什么会发生这种情况？如何编写承诺以按顺序执行？

我需要在一个userID承诺链中间放入一个参数(这是唯一需要它的承诺).所有承诺都应以同步顺序执行.

SideNote- stackoverflow上的所有类似示例都有点不同 - 比如使用lambda函数(我使用声明的函数).所以我仍然不太确定.

var initialize = function(userID) {
      var firstPromise = Module2.getFirstPromise();
          firstPromise.then(getSecondPromise)
         .then(getThirdPromise)                     
         .then(getFourthPromise)  //<----Fourth promise needs userID
         .then(getFifthPromise)
         .then(Utils.initializeComplete);
  }

所有承诺都是这样的函数:

var thirdPromise = function() {
   return new Promise(function(resolve, reject) {
      //fetch data
        //On Return, Store it
         resolve() //Nothing needed to passed down from this promise
      });

    });

}

我正在尝试这个,它"有效",但我不确定这是不是我"假设"处理这样的事情.:)

var initialize = function(userID) {
      var firstPromise = Module2.getFirstPromise();
          firstPromise.then(getSecondPromise)
         .then(getThirdPromise)                     
         .then(function(){ return fourthPromise(userID)})
         .then(getFourthPromise)
         .then(Utils.initializeComplete);
  }

注意:getFirstPromise来自我的代码中的不同模块.这不应该是问题的重要:)

因为我正在使用具有在同一原型中调用其他函数的函数的原型,所以我必须使用该方法来引用该方法 this

this创建的问题:

但正因为如此,我必须保留一个使用的背景,this让我形成非常丑陋的.bind(this)墙壁.

这是我为笑而做的一个简化例子.

Killmyself.prototype.fireLeMissles = function () {

    return new Promise(function(resolve,reject) {
        this.anotherFunction(param).then(function(result) {

        someList.forEach(function(item) {
          this.fireLeMissles().then(function(anotherResult){
            promiseList.push(anotherResult)
          })
        },this);
        Promise.all(promiseList).then(function(promiseItem){
          childPlacesIds.forEach(function(childPlaceId) {
            //Do Other Stuff
          },this);
        });
      resolve(result);
    }.bind(this).catch(function(err){
      console.log("Yea, life sucks sometimes.")
    }));
  }.bind(this));
}

Killmyself.prototype.another = function(){
   //Other stuff
}

你可以看到,因为在同一个原型中调用函数,例如this.anotherFunction(......和this.fireLeMissles(......我必须对上下文进行深度保存,现在(在我更大的版本中)使得这些代码难以使用.

题:

这是一个"男人,并利用JavaScript的更难的方面"的事情 - 或者你经验丰富的开发人员看到这样的深层绑定可以避免的简单方法？

我有这个问题,在路由器文件中返回一个路由器对象 - 中间件在响应已经被调用后被调用.

我认为在路线之后放置的中间件永远不会为该路线执行,我特别认为如果已经给出了响应,那将是真的.

主要问题:

中间件应该在响应后停止被调用吗？

例如:当调用端点"/ login"并发送响应时,调用中间件A和B.

注意:我已经将路由器包装在一个更高阶的函数中(对于socket.io功能,但这不是重点).

代码示例:

var express = require('express');
var router = express.Router();

var wrappedRouter = function(val) {

    router.get('/login', function(req, res) {
        console.log("Inside login route");
        res.sendFile(path.resolve('login.html'))
    }

    router.use(function(req, res, next) {
        console.log("Exectuing middleware A");
    });

    router.use(function(req, res, next) {
        console.log("Exectuing middleware B");
    });

    router.get('/another-route', function(req, res) {
        res.sendFile(path.resolve('login.html'))
    }

    return router;

}
//Prints:
// Inside login route
// Exectuing middleware A
// Exectuing middleware B

我没有使用像把手或视图这样的模板语言（我捆绑了客户端代码），所以我很难弄清楚如何在不将其传递到视图的情况下发送 csrf 令牌。

几乎所有示例都像这样注入令牌服务器端：

app.get('/form', csrfProtection, function(req, res) {
  // pass the csrfToken to the view
  res.render('send', { csrfToken: req.csrfToken() })
})

我不完全确定注入是否是安全机制正常工作所必需的。

注意：我将 cookie 选项设置为 true，并且在 csurf 之前调用了 cookie 解析器 - 但我仍然收到ForbiddenError: invalid csrf 令牌（我相信这是因为我将 _csrf 秘密作为令牌发回，但我猜它发送秘密，_csrf，我们还必须连同它一起发送 csrf 令牌。

题：

是否有其他可接受的方式将 csrf 令牌发送到客户端（例如 headers、cookies、res.body 等）？