Добавление аутентификации JWT и авторизации на основе ролей в приложении Next.js / Apollo / GraphQL с использованием функциональных компонентов / хуков - PullRequest
Новая
       105

Добавление аутентификации JWT и авторизации на основе ролей в приложении Next.js / Apollo / GraphQL с использованием функциональных компонентов / хуков

0 голосов
/ 22 апреля 2020

Мне нужно добавить JWT-аутентификацию и авторизацию на основе ролей в приложение, созданное с использованием Далее. js, Apollo и GrapqhQL .

Приложение должно обрабатывать функции регистрации / входа в систему / выхода из системы / сброса пароля / et c и разрешать / запрещать доступ к выбранному контенту для различных ролей (пользователи / участники / администраторы / et * 1043). *). Так что это в значительной степени стандартное приложение.

В данный момент я использую нижеприведенные модули в приложении. См. package. json file: 

"dependencies": {
  "@apollo/react-hooks": "^3.1.3",
  "apollo-cache-inmemory": "^1.6.5",
  "apollo-client": "^2.6.8",
  "apollo-link-http": "^1.5.16",
  "graphql": "^14.6.0",
  "graphql-tag": "^2.10.3",
  "isomorphic-unfetch": "^3.0.0",
  "next": "^9.3.0",
  "next-with-apollo": "^5.0.0",
  "react": "^16.13.0",
  "react-dom": "^16.13.0"
}

Основной Next. js _app. js файл (шлюз) выглядит так: 

import React from "react";
import Head from "next/head";
import { ApolloProvider } from "@apollo/react-hooks";
import withData from "../config/apollo";

const App = ({ Component, pageProps, apollo }) => {
  return (
    <ApolloProvider client={ apollo }>
      <Head>
        <title>App Title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <Component { ...pageProps } />
    </ApolloProvider>
  )
};

export default withData(App);

Файл конфигурации Appollo выглядит следующим образом: 

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import withApollo from "next-with-apollo";
import { createHttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";

const GRAPHQL_URL = process.env.BACKEND_URL || "https://api.my-domain.com/graphql";

const link = createHttpLink({
  fetch,
  uri: GRAPHQL_URL
});

export default withApollo(
  ({ initialState }) =>
    new ApolloClient({
      link: link,
      cache: new InMemoryCache()
        .restore(initialState || {})
    })
);

Требования к проекту:

  • для использования JavaScript (не TypeScript)
  • для использования функциональных компонентов / хуков React (не компонентов класса)
  • для сохранения существующих использованных модулей (см. Выше пакет. json)
  • для использования минимальное количество дополнительных модулей (предпочтения по расширению существующих логи c)

Вопросы: 1. Как изменить мой файл _app. js и мой файл конфигурации Apollo, чтобы можно было достичь цели 2. Что необходимо выполнить дополнительную работу для аутентификации и авторизации пользователей с помощью токенов JWT

...