【发布时间】:2023-04-02 18:28:01
【问题描述】:
这可能是一个愚蠢的问题,但我试图尽可能简单地解释它。
所以我一直在使用 axios 将数据从我的服务器检索到我的反应应用程序(redux) 由于我在我的应用程序中经常使用 socket.io,我想我也可以使用它来进行身份验证,所以我不必同时使用 axios 和 socket.io。我一直在使用 PassportJS 进行身份验证,但我无法理解我在 npm 上找到的 socket.io 护照包是如何工作的。
我正在使用thissocket.io-redux 中间件在socket.io 事件上触发reducer。有了这个,我可以调度操作,然后发送到服务器,我可以从服务器触发我想要的减速器,以改变状态。
这是我的 store.js
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
import { composeWithDevTools } from 'redux-devtools-extension';
import createSocketIoMiddleware from 'redux-socket.io';
import io from 'socket.io-client';
const socket = io('http://localhost:5000');
const socketIoMiddleware = createSocketIoMiddleware(socket, "io/");
const initialState = {};
const middleware = [thunk, socketIoMiddleware];
const store = createStore(
rootReducer,
initialState,
composeWithDevTools(
applyMiddleware(...middleware)
)
);
// store.dispatch({type:'server/hello', data:'Hello!'});
export default store
使用此方法,在连接到网站时为每个客户端创建一个套接字。我也在服务器端创建了一个 Store 类,使用这样的登录/注销方法(这些方法跟踪客户端和与之关联的用户):
class Store
{
constructor(){
this.loggedInUsers = [];
}
loginUser(userID, socketID){
console.log('login', userID, socket.id);
const index = this.loggedInUsers.find(u => u.socketID !== socket.id && u.userID === userID);
if(index >= 0){
this.logoutUser(this.loggedInUsers[index].socketID);
}
this.loggedInUsers = [
...this.loggedInUsers,
{
userID: userID,
socketID: socket.id,
}
];
}
logoutUser(socketID){
console.log('logout', socketID);
const index = this.loggedInUsers.find(u => u.socketID === socketID);
if(index >= 0){
this.loggedInUsers = [...this.loggedInUsers.slice(0, index), ...this.loggedInUsers.slice(index+1)];
}
}
}
module.exports.store = new Store();
在登录时,socket.io 事件被发送到服务器,然后在成功登录时,套接字被存储在一个包含用户 ID 和与之关联的套接字的loggedInUsers 对象中,然后触发一个reducer 来存储经过身份验证的状态在我的店里。注销时,具有给定套接字的用户将从对象中删除。
现在我想知道这样做是否安全。
【问题讨论】: