React无法访问Directus图片资源：求有效Access Token获取方法

问题描述 #

我的API端点是https://comfy-store.directus.app/items/products/，里面包含title、price、image数据。在React中能正常获取title和price，但访问图片时返回权限错误：

{"errors":[{"message":"You don't have permission to access this.","extensions":{"code":"FORBIDDEN"}}]}

图片的src写法是：

<img src={"https://comfy-store.directus.app/items/assets/" + image}/> 

尝试添加示例access token后又返回凭证无效：

{"errors":[{"message":"Invalid user credentials.","extensions":{"code":"INVALID_CREDENTIALS"}}]}

附上我的React组件代码：

const ProductsGrid = () => {
    const { products } = useLoaderData();
    const data = products.data


    // const directusApi = 'https://comfy-store.directus.app/items/products/';
    // const fileId = image;
    // const accessToken = 'your-access-token';

    // const imageUrl = `${directusApi}/assets/${fileId}?access_token=${accessToken}`;
    // console.log(imageUrl);

    return (
        <div className='pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3 '>
            {data.map((product) => {
                const { title, description, image, price } = product;
                return (
                    <Link
                        key={product.id}
                        to={`/products/${product.id}`}
                        className='card w-full  shadow-xl hover:shadow-2xl transition duration-300 '
                    >
                        <figure className='px-4 pt-4'>
                            <img
                                src={"https://comfy-store.directus.app/items/assets/" + image}
                                alt={title}
                                className='rounded-xl h-64 md:h-48 w-full object-cover'
                            />
                        </figure>
                        <div className='card-body items-center text-center'>
                            <h2 className='card-title capitalize tracking-wider'>{title}</h2>
                            <span className='text-secondary'>${price}</span>

                        </div>
                    </Link>

                );
            })}
        </div>
    );
};
export default ProductsGrid; 

解决步骤 #

1. 生成静态令牌（Static Token） #

• 登录Directus管理后台
• 进入设置 → 用户与权限 → 用户
• 选择用于API访问的用户（建议创建专门的服务用户）
• 在用户详情页的令牌区域，点击生成静态令牌，复制生成的令牌字符串

2. 配置用户权限 #

• 进入设置 → 用户与权限 → 角色，找到对应用户的角色
• 确保该角色对assets集合开启了读取权限，否则即使有令牌也无法访问图片

3. 修正图片URL格式 #

Directus资产的正确访问路径是/assets/{file-id}，而非/items/assets/{file-id}，结合令牌的正确写法：

<img 
  src={`https://comfy-store.directus.app/assets/${image}?access_token=${你的静态令牌}`}
  alt={title}
/>

4. 安全管理令牌 #

不要硬编码令牌到代码中，建议存放在环境变量：

1. 在项目根目录创建.env文件：

REACT_APP_DIRECTUS_TOKEN=你的静态令牌

2. 在组件中调用：

const accessToken = process.env.REACT_APP_DIRECTUS_TOKEN;

// 渲染图片时使用
<img 
  src={`https://comfy-store.directus.app/assets/${image}?access_token=${accessToken}`}
  alt={title}
/>

内容的提问来源于stack exchange，提问作者paul allen