用 nextjs 和 express 保护路由答案

【问题标题】：protecting routes with nextjs and express用 nextjs 和 express 保护路由
【发布时间】：2020-04-26 14:58:29
【问题描述】：

所以我正在使用 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 后端的人是如何做到的？我希望有一个很好的参考。

【问题讨论】：

标签： reactjs express next.js

【解决方案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()。

希望上面的代码可以帮助到你。

【讨论】：