Can't send correct JSON params from admin-on-rest (reactJS)

Question

Hi all I'm following this https://marmelab.com/admin-on-rest/index.html, for login thing, I'm following 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();
}

For API I'm using Rails 5.0, when running the code above and debug the params on API side I can't get params body, here is the result :

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

I tried to change sent headers (Content-Type) request to :

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

And debug the params again on API side, and the result :

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

So how to make getting params such :

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

Mohammad shaban · Answer 1 · 2017-02-22T08:56:46.403

2

By default browser takes form data if you want send json like format then ypu have to set json property true in API fetch method see below--

  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})
    })

edited Feb 22 '17 at 08:56

answered Feb 21 '17 at 11:33

Mohammad shaban

251
2
11

Hi Mohammad Thanks, but still can't get params – Khalid Feb 22 '17 at 01:50
have you faced access allow origin problem see allow cors on rails backend i got the problem in content type t should be small instead capital like -----headers: { "Content-type": "application/json; charset=UTF-8", } – Mohammad shaban Feb 22 '17 at 08:55

Clarissa D. Pereira · Answer 2 · 2017-10-17T15:23:01.870

If you wish the json to interprete your characters, you should add the charset=utf-8 to parse.

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'   
            }),
})

And be sure you are saving the token correctly. For me I didn't use the token as the admin-on-rest suggested, I used a response Header named access-token, so I saved on localStorage directly in the response. Maybe that will influence the result on your code.

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();
        });

Can't send correct JSON params from admin-on-rest (reactJS)

2 Answers2