如何使用React在Rails中设置极简主义身份验证？

Question

我试图在我的Rails后端和我的React前端之间建立一个最小的身份验证层，但我遇到了一些问题。

1. 我似乎无法找到服务器传递给我的客户端的cookie密钥值。在网络选项卡中，我在响应中看到它：Set-Cookie:_skillcoop_session=....，但是当我使用js-cookie寻找上面的cookie，_skillcoop_session时，我只看到一个叫identity-token=...，它的值与_skillcoop_session不同。如何在浏览器中访问_skillcoop_session？
2. 我将什么标题密钥传递给服务器以向我的后端发出信号，使用“this”标题密钥与其存储的会话相匹配？在this post中，Justin Weiss似乎建议我使用如下标题向服务器发出请求：Cookie: _skillcoop_session=....
3. 我做错了吗？我会更好地使用像devise这样的宝石吗？
4. 另外，为了在我的其他控制器中加载会话，我不得不做像session['init'] = true这样的事情，我学会了从这个SO post做到这一点。这看起来很丑陋。为什么在先前在不同的请求中将其设置为不同的控制器操作之后，我必须在单独的控制器操作中手动重新加载会话？

我目前正在简化用户和身份验证 - 我想要做的就是设置一个session[:user_id]并能够在其他控制器操作中读取该会话数据。为此，我有两个主要文件供考虑：UsersController和Transport.js。在UsersController中，我只是将session[:user_id]与数字1对齐并且在Transport.js中我想传递从服务器收到的cookie，以便后端可以维持与客户端的请求之间的会话。

这是我的控制器：

class UsersController < ApplicationController

  def create
    session[:user_id] = 1
    render json: user_stub, status: :ok
  end

  def show
    puts "user id: #{session[:user_id]}"
    # should return, 1, but is returning, nil...why?
    render json: user_stub, status: :ok
  end

  private

  def user_stub
    {
      id: 1,
      email: params['email'] || '[email protected]',
      password: params['password'] || 'fake password'
    }
  end
end

这是我的应用程序的主要位置，我向服务器发出请求 - 它是一个抽象我称为Transport.js：

require('es6-promise').polyfill();
require('isomorphic-fetch');
var cookie = require('js-cookie');


const GET = 'GET';
const POST = 'POST';

function Transport() {
}

Transport.prototype.get = function(url, options = {}) {
  return this.query(GET, url, null, options);
};

Transport.prototype.post = function(url, dataString, options = {}) {
  return this.query(POST, url, dataString, options);
};

Transport.prototype.query = function(method, url, dataString, options = {}) {
  var data;

  if (dataString) {
    data = JSON.parse(dataString);
  }

  switch(method) {
    case GET:
      return fetch(url, Object.assign({headers: {'Cookie': cookie.get('_skillcoop_session')}}, options, {
        method: method
      }));
    case POST:
      return fetch(url, Object.assign({
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      }, options, {
        method: method
      }));
    default:
      throw new Error("This HTTP Method is not supported.");
  }
};

module.exports = Transport;

Answer 1

1. 根据这个SO post，人们无法访问JS中的Set-Cookie头。因此，我想我在响应头中处理Set-Cookie的尝试是一种愚蠢的努力。
2. According to我用来发出HTTP请求的NPM包，我需要将第二个参数中的{credentials: 'same-origin'}键值对传递给fetch，它将“自动为当前域发送cookie”。这样做了 - 会话对象可用，并包含在上一个请求中以不同操作在会话中设置的user_id。
3. 是。我改变了我如何解决这个问题。我非常倾向于这个Reddit post。简而言之，我在后端使用ruby-jwt并将令牌存储在前端的localStorage中。每个请求到服务器的请求都将在令牌AUTHORIZATION中包含令牌。
4. 在以下步骤1和2中，看起来我不再需要“重新加载会话”。