Не удалось получить обновленный токен из localStorage в ApolloClient - PullRequest
Новая
       27

Не удалось получить обновленный токен из localStorage в ApolloClient

0 голосов
/ 30 июня 2019

Я использую React Authentication с ApolloGraphQL.

Контекст:
В signin.js я генерирую токен, когда пользователь нажимает кнопку отправки и устанавливает его в Localstorage.
Затем я извлекаю токен из App.js и могу передать его в GraphQL, чтобы его можно было найти в server.js.

Проблема:
После того, как пользователь нажмет кнопку отправки, я вижу маркер нового поколения в: Инструменты разработчика> Приложение> Локальное хранилище. Но он возвращает 'null' для 'токена на стороне клиента' в App.js
Когда я снова выполняю вход, я вижу ранее сгенерированный токен как значение «клиентского токена», что означает, что он не получает обновленный токен из LocalStorage.

Очевидно, что из-за этого «токен на стороне сервера» в первый раз является нулевым и возвращает ранее сгенерированный токен во второй раз.

приложение / клиент / SRC / компоненты / signin.js 

    handleSubmit = (event, SignIn)  => {
        event.preventDefault();
        SignIn().then(({ data }) => {
                localStorage.setItem('token', data.SignIn.token);
                this.clearState();
        })
    }

приложение / клиент / SRC / app.js 

  //initiating the ApolloClient
const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',

  fetchOptions: {
    credentials: 'include'
  },
//adding token to the localstorage
  request: operation => {
  const token = localStorage.getItem('token');

  operation.setContext({
      headers:{
          authorization: token
      }
    })
    console.log(`client side token ${token}`);
   },
 //catching the most common network error, if any
  onError: ({ networkError }) => {
    if(networkError){
      console.log('Network Error', networkError);
      }
  }
});

server.js 

const app = express();
app.use(async (req, res, next) => {
const token = req.headers['authorization'];
console.log(`server side token: ${token}`);
  next();
});

1 Ответ

0 голосов
/ 02 июля 2019

вам нужно что-то вроде промежуточного программного обеспечения для аутентификации, так как запрос в клиенте apollo только вызывается при разработке, я думаю, поэтому localStorage имеет предыдущий токен при перезагрузке страницы. 

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { ApolloLink, concat } from 'apollo-link';

const httpLink = new HttpLink({ uri: '/graphql' });

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  operation.setContext({
    headers: {
      authorization: localStorage.getItem('token') || null,
    }
  });

  return forward(operation);
})

const client = new ApolloClient({
  link: concat(authMiddleware, httpLink),
});

см. https://www.apollographql.com/docs/react/advanced/network-layer/#middleware для более подробной информации

...