使用React部分前端时处理Rails API的401未授权错误

• 后端：Rails 5.2 + Ruby 2.7，采用Devise做认证、Pundit做授权，半API架构（仅projects页面为API接口，登录/登出等其他功能使用Rails视图）
• 前端：React（运行在4000端口），通过axios发送API请求
• 已配置：Rails端启用rack-cors，允许所有来源的请求

当前问题：React向http://localhost:3000/projects发送GET请求时，被Rails重定向至登录页面。已知需通过Token完成认证，但不清楚如何从Rails获取Token，需相关实现思路及参考方向。

用户当前axios请求代码：

const API_URL = 'http://localhost:3000/projects'

function getAPIData(){
  return axios.get(API_URL).then((response) => response.data)
  
}

function App() {
  const [bugs, setBugs] = useState([]);

  useEffect(() => {
    let mounted = true;
    getAPIData().then((items) => {
      if (mounted) {
        setBugs(items);
      }
    });
    return () => (mounted= false);
  }, [])

  return (<Router>
    <Header title='Backend'/>
    <BugList bugs={bugs}/>
    <Footer/>
    </Router>
  );
}

export default App;

1. 扩展Devise支持Token认证 #

Devise默认基于Session认证，需扩展为Token认证，两种常见方案：

• 使用devise_token_auth gem：专为Devise设计的API Token认证方案，自动处理Token生成、分发、过期逻辑。需在User模型添加uid、access_token、refresh_token等字段，配置Devise路由为API模式。
• 自定义Token实现：手动在User模型添加authentication_token字段，在Devise的after_sign_in回调中生成并返回Token，前端存储后在请求头携带该Token。

2. 调整Rails路由与控制器逻辑 #

• 将projects路由归入namespace :api或scope :api下，区分API请求与普通视图请求，避免API请求被重定向（Devise默认对非API请求返回重定向，API请求应返回401状态码）。
• 编写API专用基控制器，自定义authenticate_user!方法：检查请求头中的Token有效性，无效则返回401，而非重定向。

3. 前端Token处理流程 #

• 用户通过Rails登录页面完成登录后，Rails可在登录成功时将Token传递给前端（如在登录视图中渲染全局JS变量，或通过API接口返回）。
• 前端将Token存储在localStorage中，每次axios请求时携带Token：

  axios.defaults.headers.common['Authorization'] = `Token token=${localStorage.getItem('authToken')}`;
  

参考方向 #

• Devise官方文档中API认证相关章节
• 社区中「Rails Devise API Token认证」主题的博客内容，覆盖gem使用与自定义实现两种方案
• Pundit官方文档中API授权示例，确保Token认证通过后正确执行权限校验

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