React 通过 Axios 请求认证访问后端 API

2024-06-04 渥太华微生活

React 通过 Axios 请求认证访问后端 API

1、在 Laravel 中安装 React

参考下面文章：

1) 安装 react, react-dom，@vitejs/plugin-react 和 axios：

npm install react@latest react-dom@latest @vitejs/plugin-react axios

2) 更新 vite.config.js：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

2、更新主页：

更新 resources\views\welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Install React in Laravel using Vite</title>

    @viteReactRefresh
    @vite('resources/js/app.jsx')
</head>

<body>
    <div id="app"></div>
</body>

</html>

3、用 resources/js/app.jsx 代替 resources/js/app.js

import './bootstrap';
import '../css/app.css'
import ReactDOM from 'react-dom/client';
import Home from './components/Home';

ReactDOM.createRoot(document.getElementById('app')).render(<Home />)

4、创建 resources/js/components/Home.jsx

后端API接口以及获取token参考下面文章：

Laravel 通过 Sanctum 进行API认证

import axios from "axios"
import React, { useEffect, useState } from "react"

export default function() {
    const BASE_URL = 'http://127.0.0.1:8000';
    const TOKEN = '1|DfapLtnxCtKW7TxUmR7lnzCm978K5xOqcp2D0ilq9d6caf12';
    const [user, setUser] = useState(null);

    const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${TOKEN}`
    };

    useEffect(() => {
        axios.get(`${BASE_URL}/api/user`, {headers}).then(response => {
            setUser(response.data);
        }).catch(error => {
            console.log(error);
        });
    }, []);
   
    if (!user) {
        return <div>Loading...</div>
    }

    return (
        <div>
            <h2>Username: {user.name}</h2>
            <h2>Email: {user.email}</h2>
        </div>
    );
}

5、运行测试

在一个终端运行 VITE server