如何为AWS Mobile React Starter Kit配置未授权用户只读权限？

我完全懂你的痛点——AWS Mobile React Starter Kit默认把所有内容都锁给登录用户，想开放部分只读权限给未授权用户却改崩了应用，确实挺闹心的。下面给你一套通用的分步方案，跟着来就能搞定：

先把需要开放的页面从受保护路由里合理拆分出来，别像之前乱注释导致路由结构崩溃：

• 打开/src/index.js，找到项目里的PublicRoute和PrivateRoute组件（这是React Router封装的权限路由）
• 将允许未授权用户访问的查询类页面（比如商品列表页）用PublicRoute包裹，编辑/删除这类操作页继续保留在PrivateRoute下
• 示例代码参考：

  // 未授权可访问的查询页
  <PublicRoute path="/product-list" component={ProductList} />
  // 仅登录用户可访问的编辑页
  <PrivateRoute path="/product/edit/:id" component={ProductEdit} />
  

• 注意：只调整对应页面的路由类型，不要随便删除或注释整个路由结构。

要给未认证用户开放数据库的只读权限，这一步是关键：

• 登录AWS控制台，进入你的Amplify项目，选择Backend environments -> 对应环境 -> Data模块（如果用的是Amplify DataStore或DynamoDB）
• 找到你的数据模型（比如Product），编辑权限规则：
  • 给未认证用户勾选查询（Query）和扫描（Scan）权限，取消创建（Create）、更新（Update）、删除（Delete）权限
  • 如果是直接用IAM策略配置DynamoDB，给未认证角色添加如下策略（替换成你的资源信息）：

    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Effect": "Allow",
          "Action": [
            "dynamodb:Query",
            "dynamodb:Scan"
          ],
          "Resource": "arn:aws:dynamodb:你的区域ID:你的账号ID:table/你的表名"
        }
      ]
    }
    

• 保存配置后，运行本地命令amplify push同步后端权限到前端。

确保未授权用户只能看到只读内容，看不到操作按钮：

• 在查询页面组件（比如ProductList.js）里，用Amplify的Auth模块判断用户登录状态：

  import { Auth } from 'aws-amplify';
  import { useState, useEffect } from 'react';
  
  const ProductList = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
  
    useEffect(() => {
      const checkAuthStatus = async () => {
        try {
          await Auth.currentAuthenticatedUser();
          setIsLoggedIn(true);
        } catch (err) {
          setIsLoggedIn(false);
        }
      };
      checkAuthStatus();
    }, []);
  
    // ...其他逻辑
  }
  

• 根据isLoggedIn状态控制操作按钮的显示：

  {/* 只有登录用户能看到编辑按钮 */}
  {isLoggedIn && <button onClick={() => handleEdit(item)}>编辑商品</button>}
  

• 额外确认：编辑页的PrivateRoute已经配置了登录校验，防止用户手动输入URL绕过权限。

• 退出登录状态，访问查询页，确认能正常加载数据且看不到编辑/删除按钮
• 尝试手动输入编辑页的URL，确认会被重定向到登录页
• 登录后，验证编辑功能正常，控制台无权限错误（比如403）

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