使用nextjs和express保护路由

Question

因此，我正在使用NextJS，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 });
    });
  }

现在每次我获得该令牌时，我都会尝试将其添加到Axios的默认值中，以便我可以访问这些路由，但似乎无法执行此操作，因为此时componentDidMount方法甚至还没有运行。

而且我陷入了一个循环，似乎找不到找到传递令牌的好方法，我尝试了redux之类的东西，即使那样我也做不到。

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

将next与api后端一起使用的人如何做？我希望对此有个很好的参考。

Answer 1

我认为您应该尝试在reactApp中提供服务。

例如，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之后，您还可以创建用于处理令牌的auth.js，包括登录，注册令牌并将其保存到本地存储，并在需要时随时使用。

例如auth.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（）。

我希望上面的代码可以为您提供帮助。