0

大家好，我正在关注此https://marmelab.com/admin-on-rest/index.html，对于登录，我正在关注https://marmelab.com/admin-on-rest/Authentication.html：

import { AUTH_LOGIN } from 'admin-on-rest';
import restClient from './restClient';

export default (type, params) => {
  if (type === AUTH_LOGIN) {
    const { username, password } = params;
    const request = new Request('http://localhost:9000/login', {
        method: 'POST',
        headers: new Headers({"Content-Type": "application/json"}),
        body: JSON.stringify({ username: username,
                               password: password})
    })

    return fetch(request)
        .then(response => {
            if (response.status < 200 || response.status >= 300) {
                throw new Error(response.statusText);
            }
            return response.json();
        })
        .then(({ token }) => {
            localStorage.setItem('token', token)
        });
    }
    return Promise.resolve();
}

对于 API，我使用的是 Rails 5.0，在运行上面的代码并在 API 端调试参数时，我无法获得参数主体，结果如下：

<ActionController::Parameters {"controller"=>"sessions", "action"=>"create"} permitted: false>

我试图将发送的标头（内容类型）请求更改为：

...
headers: new Headers({"Accept": "application/json", 
                      "Content-Type": "application/x-www-form-urlencoded"}),
...

并在 API 端再次调试参数，结果：

<ActionController::Parameters {"{\"username\":\"jhon\",\"password\":\"dow\"}"=>nil, "controller"=>"sessions", "action"=>"create"} permitted: false>

那么如何使获取参数如下：

ActionController::Parameters {"username"=>"jhon", "password"=>"doe", "controller"=>"sessions", "action"=>"create"} 允许：false>

4

2 回答 2

2

默认情况下，如果您想发送类似格式的 json，浏览器会采用表单数据，那么 ypu 必须在 API fetch 方法中将 json 属性设置为 true，请参见下文 -

  const request = new Request('http://localhost:9000/login', {
        method: 'POST',
        json: true,
        headers: new Headers({"Content-type": "application/json"}),
        body: JSON.stringify({ username: username,
                               password: password})
    })
于 2017-02-21T11:33:14.667 回答
1

如果您希望 json 解释您的字符，您应该添加charset=utf-8来解析。

const request = new Request('http://localhost:9000/login', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json; charset=utf-8',
                                   'Accept': 'application/json'   
            }),
})

并确保您正确保存了令牌。对我来说，我没有token像admin-on-rest建议的那样使用 ，我使用了一个名为 的响应 Header access-token，所以我直接在响应中保存了 localStorage 。也许这会影响您的代码的结果。

return fetch(request)
        .then(response => {
            if (response.status < 200 || response.status >= 300) {
                throw new Error(response.statusText);
            }
            localStorage.setItem('access-token', response.headers.get('access-token'));
            return response.json();
        });
于 2017-10-17T14:43:34.637 回答