Redux 中如何处理 Token 身份认证-JavaScript中文网-JavaScript教程资源分享门户

在现代 web 应用中，常常需要对用户进行身份认证以保护用户信息和数据安全。在前端框架中，通常采用 Token 认证方式，即用户在登录后得到一个 Token，在每次请求时将 Token 发送给服务器进行认证。而在使用 Redux 管理应用状态时，我们需要考虑如何在 Redux 中处理 Token 认证，以保证应用的安全性和稳定性。

Token 认证的具体实现方式

Token 认证的具体实现方式，通常包括以下几个步骤：

用户在登入页面输入用户名和密码进行认证。
服务器验证用户信息，并生成一个 Token 返回给客户端。
客户端将 Token 存储到本地，如 local storage 或 cookie 中。
在后续的请求中，客户端将 Token 携带在请求头中发送给服务器。
服务器验证 Token 的有效性，确定用户是否具有访问权限。

在 Redux 中处理 Token 认证的思路

在 Redux 应用中，我们需要考虑如何在全局状态中存储 Token，并在每次发送请求时带上 Token。因此，我们需要将 Token 存储在 Redux 的状态树中，并在请求时将 Token 从状态树中读取出来。

具体实现逻辑如下：

在 Redux 的状态树中新建一个 auth 字段，用于存储用户的认证信息，包括 Token、是否认证等。
在用户登入成功后，将认证信息存储到 Redux 的状态树中。使用 Redux 的 action 更新状态树，代码如下：

const loginSuccess = (token) => ({
  type: 'LOGIN_SUCCESS',
  payload: {
    token,
    isAuthenticated: true,
  },
});

在每次请求时，读取状态树中存储的 Token 并添加到请求头中。可以使用 Redux 的中间件 interceptors 来实现，在请求发送前拦截请求并添加 Token。代码示例如下：

// javascriptcn.com 代码示例
axios.interceptors.request.use(
  (config) => {
    const state = store.getState(); // 读取 Redux 状态树
    const token = state.auth.token; // 获取 Token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 添加 Token 到请求头
    }
    return config;
  },
  (error) => Promise.reject(error),
);

Token 认证的注意事项

在处理 Token 认证时需要注意以下几点：

需要将 Token 存储到安全的存储位置，如 local storage 或 cookie 中，并设置过期时间，以防止 Token 被恶意截获。
需要在客户端加密传输 Token，以保护 Token 的安全性。
需要在服务器端验证 Token 的有效性，以防止 Token 被篡改或伪造。

总结

在 Redux 应用中处理 Token 认证的关键在于将 Token 存储到全局状态中，并在每次请求时将 Token 从状态树中读取出来。同时需要注意 Token 的安全性和有效性，以保护用户数据和应用安全。

示例代码：

// javascriptcn.com 代码示例
// auth.reducer.js
const initialState = {
  token: null, // 存储 Token
  isAuthenticated: false, // 是否认证
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS': {
      const { token, isAuthenticated } = action.payload;
      return {
        ...state,
        token,
        isAuthenticated,
      };
    }
    default:
      return state;
  }
};

export default authReducer;

// api.js
import axios from 'axios';
import store from './store';

axios.interceptors.request.use(
  (config) => {
    const state = store.getState(); // 读取 Redux 状态树
    const token = state.auth.token; // 获取 Token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 添加 Token 到请求头
    }
    return config;
  },
  (error) => Promise.reject(error),
);

export default axios;

// login.js
import React from 'react';
import { useDispatch } from 'react-redux';
import api from './api';

const Login = () => {
  const dispatch = useDispatch();

  const handleLogin = async () => {
    try {
      const res = await api.post('/login', { username, password });
      const { token } = res.data;
      dispatch(loginSuccess(token));
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <Form>
      {/* 略 */}
    </Form>
  );
};

export default Login;

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654198ca7d4982a6ebb2df03