react做的app的token存在哪里

React是一个非常流行的web前端开发框架，它提供了一种构建交互式用户界面的方式。在React应用程序中，通常需要使用token来管理用户身份验证和授权。Token是一种安全的标识符，用于验证用户的身份，并允许他们访问应用程序的特定部分或功能。在React应用程序中，Token是如何存储的呢？

Token可以在应用程序的前端或后端存储。在前端存储Token的最常见方法是将Token存储在浏览器的本地存储(localStorage)或会话存储(sessionStorage)中。这些存储方式通常比cookie更安全，因为它们不会在每个服务器请求中发送到服务器，而是仅在浏览器中存储。此外，它们还可以在浏览器关闭后保持不变。

要在React应用程序的前端存储Token，可以使用一些第三方库，如redux-persist或redux-storage。这些库允许将所有Redux状态持久保存到本地存储中，并且可以将Token与其他状态一起保存，以便在应用程序重新加载时恢复状态。以下是使用redux-persist保存Token的示例代码：

```

import { createStore } from 'redux';

import { persistStore, persistReducer } from 'redux-persist';

import storage from 'redux-persist/lib/storage';

const initialState = { token: null };

function reducer(state = initialState, action) {

switch (action.type) {

case 'LOGIN':

return { ...state, token: action.token };

case 'LOGOUT':

return { ...state, token: null };

default:

return state;

}

}

const persistConfig = { key: 'root', storage };

const persistedReducer = persistReducer(persistConfig, reducer);

const store = createStore(persistedReducer);

const persistor = persistStore(store);

export { store, persistor };

```

在这个例子中，我们使用redux-persist来将Redux状态持久保存到本地存储(localStorage)中。我们定义了一个初始状态，包含一个名为“token”的属性，然后编写一个reducer来处理我们的登录和注销操作。当用户登录时，我们将Token存储在state的“token”属性中，然后在以后的请求中使用它。当用户注销时，我们将Token设置为null。

另一种在React应用程序中存储Token的方法是使用cookie。Cookies是一种在客户端和服务器之间传输数据的方法。与localStorage和sessionStorage不同，cookie在每个请求中都会发送到服务器。Cookie可以通过以下方式设置：

```

document.cookie = 'name=value; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'

```

在这个例子中，我们将一个名为“name”的cookie设置为“value”。我们还指定了一个过期时间，以便在过了这个时间后，cookie将被删除。我们还指定了cookie的路径，以便只有在该路径下的请求才会发送此cookie。

在React应用程序中使用cookie存储Token，可以使用第三方库，如js-cookie。以下是一个使用js-cookie保存Token的例子：

```

import Cookies from 'js-cookie';

const token = 'my_token';

Cookies.set('token', token, { expires: 7 }); // cookie将在7天后过期

```

在这个例子中，我们将名为“token”的cookie设置为我们的Token，并指定它将在7天后过期。

不管是将Token存储在前端还是后端，确保仅将Token发送到安全的服务器，并尽可能地对其进行加密和解密，以保护用户的身份和隐私。