Question

我正在使用下一个 js 应用程序。对于后端，我使用带有 sanctum auentication 的 laravel。我想使用 laravel sanctum 和 nextjs SPA 应用程序实现凭据身份验证（用户名、密码）。所有这些都与客户端一起工作。但是我无法在 getServerSideProps 中访问受保护的请求。它需要 crsf 令牌。

页面/登录.js

import React, { useState } from 'react';
import api from '@/util/api';
import { logIn } from '@/util/auth';

const LogInPage = () => {
  const [formInput, setFormInput] = useState({ username: '', password: '' });
          
  const signIn = (e) => {
    e.preventDefault();

    api()
      .get('/sanctum/csrf-cookie')
      .then(() => {
        api()
          .post('/api/login', formInput)
          .then((response) => {
            if (response.data.error) {
              console.log(response.data.error);
            } else {
              router.push('/')
            }
          });
      });
  };

pages/index.js（受保护的路由）

const Home = ({ user }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    api()
      .get('/api/users')
      .then((response) => {
        setUsers(response.data);
      });
  }, []);

}

问题：如何使用 getServerSideProps 来实现？或者如何使用 NextAuth.js 来使用这个实现？或者可能需要客户端到服务器之间的桥梁

export async function getServerSideProps() {
  let users = [];
  api()
    .get('/api/users')
    .then((response) => {
      users = response.data;
    })
    .catch((error) => {
      console.error(error);
    });

  return {
    props: { users },
  };
}

'/api/users' 路由受到保护，需要认证，因此响应 401 未授权

Nextjs - 从 getServerSideProps 获取受保护的请求

0 个答案: