защита маршрутов со следующими js и express

Question

Итак, я разрабатываю приложение, используя Next JS, Аутентификацию Firebase и Express, и когда пользователь регистрируется или входит в Firebase, отправляет мне маркер, с помощью которого я могу проверить пользователя и защитить свои маршруты.

  componentDidMount() {
    const { setCurrentUser } = this.props;

    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
      if (userAuth) {
        const userRef = await createUserProfileDocument(userAuth);
        this.setState({
          currentUser: {
            ...userRef
          }
        });

        const token = await auth.currentUser.getIdToken();
        axios.defaults.headers.common['Authorization'] = token;
      }

      this.setState({ currentUser: userAuth });
    });
  }

теперь каждый раз, когда я получаю этот токен, я пытаюсь добавить его к значениям по умолчанию Ax ios, чтобы я мог получить доступ к этим маршрутам, но я не могу сделать это, потому что на данный момент метод componentDidMount не еще даже не запускался.

и я застрял в oop и, похоже, не могу найти хороший способ передать токен, я пробовал что-то вроде редукса, и даже тогда я не мог сделать это

Post.getInitialProps = async ({ store }) => {
  // axios.defaults.headers.common['Authorization'] = token;
  // const res = await axios.get('http://localhost:5000/api/posts/2');
  // return { data: res.data };
};

как люди, которые используют следующий с API-интерфейсом, делают это? Я хотел бы иметь хорошую ссылку на это.

Answer 1

Я думаю, что вам следует попытаться создать службу в своем реактиве приложения.

Например, httpService. js:

import axios from "axios";

function setJwt(jwt) {
  axios.defaults.headers.common["x-auth-token"] = jwt;
}

export default {
  get: axios.get,
  post: axios.post,
  put: axios.put,
  delete: axios.delete,
  setJwt
};

После создания httpService. js вы также может создавать аутентификацию. js, которая обрабатывает ваши токены, включая вход в систему, регистрацию и сохранение их в localalstorage и готовность к использованию, когда вы захотите.

Например, авторизация. js:

import jwtDecode from "jwt-decode";
import http from "./httpService";
import {apiUrl} from "../config.json";

const apiEndpoint = apiUrl + "/auth";
const tokenKey = "token";

http.setJwt (getJwt());

export async login function(email, password) {
  const {data: jwt} = await http.post(apiEndpoint, {email, password});
  localStorage.setItem(tokenKey, jwt);
}

export function loginWithJwt(jwt) {
  localStorage.setItem(tokenKey, jwt);
}

export function logout() {
  localStorage.removeItem(tokenKey);
}

function getCurrentUser() {
  try {
    const jwt = localStorage.getItem(tokenKey);
    return jwtDecode(jwt);
  } catch(ex) {
    return null;
  }
}

export function getJwt() {
  return localStorage.getItem(tokenKey);
}

export default {
  login,
  logout
  getCurrentUser,
  loginWithJwt,
  getJwt
};

Поэтому, если вы хотите защитить свой маршрутизатор, вам нужно только вызвать auth.getCurrentUser ().

Надеюсь, приведенный выше код поможет вам.