react mobx实现登录

Mobx 与 React 集成实现登录功能

安装必要依赖包：

npm install mobx mobx-react-lite axios

创建 AuthStore 状态管理

新建 stores/AuthStore.js 文件：

import { makeAutoObservable } from 'mobx'
import axios from 'axios'

class AuthStore {
  token = null
  error = null
  loading = false

  constructor() {
    makeAutoObservable(this)
  }

  async login(email, password) {
    this.loading = true
    try {
      const response = await axios.post('/api/login', { email, password })
      this.token = response.data.token
      localStorage.setItem('token', this.token)
      this.error = null
    } catch (err) {
      this.error = err.response?.data?.message || 'Login failed'
    } finally {
      this.loading = false
    }
  }

  logout() {
    this.token = null
    localStorage.removeItem('token')
  }
}

export default new AuthStore()

创建 React 登录组件

新建 components/LoginForm.jsx：

import { observer } from 'mobx-react-lite'
import { useState } from 'react'
import authStore from '../stores/AuthStore'

const LoginForm = observer(() => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    authStore.login(email, password)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit" disabled={authStore.loading}>
        {authStore.loading ? 'Logging in...' : 'Login'}
      </button>
      {authStore.error && <div className="error">{authStore.error}</div>}
    </form>
  )
})

export default LoginForm

配置 Mobx Provider

在应用入口文件（如 App.jsx）中：

import { Provider } from 'mobx-react'
import authStore from './stores/AuthStore'
import LoginForm from './components/LoginForm'

function App() {
  return (
    <Provider authStore={authStore}>
      <LoginForm />
    </Provider>
  )
}

实现持久化登录状态

在 AuthStore.js 中添加初始化逻辑：

class AuthStore {
  constructor() {
    makeAutoObservable(this)
    this.token = localStorage.getItem('token')
  }
  // ...其他方法不变
}

创建受保护路由组件

新建 components/PrivateRoute.jsx：

import { observer } from 'mobx-react-lite'
import { Navigate } from 'react-router-dom'
import authStore from '../stores/AuthStore'

const PrivateRoute = observer(({ children }) => {
  return authStore.token ? children : <Navigate to="/login" />
})

export default PrivateRoute

使用示例

在路由配置中：

<Routes>
  <Route path="/login" element={<LoginForm />} />
  <Route
    path="/dashboard"
    element={
      <PrivateRoute>
        <Dashboard />
      </PrivateRoute>
    }
  />
</Routes>

处理 API 请求授权

在 axios 拦截器中添加 token：

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

这种实现方式提供了完整的登录流程管理，包括状态持久化、错误处理和路由保护。Mobx 的响应式系统会自动处理状态变化和组件更新。