제목 그대로입니다. 만약 login을 리덕스를 이용해서 서버랑 연결시켜서 로그인시킬시..
pw가 노출되는것같은데 어떻게 해야할까요?
=========login page======= =========
const Loginpage = () => {
const dispatch = useDispatch();
const [email, setEmail] = useState('');
const [pw, setPw] = useState('');
const onEmailHandler = function (e) {
setEmail(e.currentTarget.value);
};
const onPwlHandler = function (e) {
setPw(e.currentTarget.value);
};
const onSubmitHandler = function (e) {
let body = { email: email, password: pw, hello: '??' };
e.preventDefault();
dispatch(LoginUser(body));
};
return (
<div style={{ display: 'flex', justifyContent: 'center' }}>
<form
action=''
style={{
display: 'flex',
flexDirection: 'column',
gap: '10px',
}}
>
<label htmlFor=''>E-mail</label>
<input
type='text'
name={email}
onChange={onEmailHandler}
placeholder='abc123@abc.com'
/>
<label htmlFor=''>Password</label>
<input
type='password'
name={pw}
onChange={onPwlHandler}
placeholder='password'
/>
<button onClick={onSubmitHandler}>Login</button>
</form>
</div>
);
};
===============user_slice================
///////////////////////여기서 login하면서 data를 받아와서 axios로 서버로 보내는데
이과정에서 f12-network를 보니 login requset가 보여서 살펴보니 payload에 loginpage에서 만든 body값 전체가 들어오면서
email,pw,가 그대로 노출됩니다. 이게 리액트라서 그냥일단 보이는건지 아니면 실제 배포하면 사라지는건지? 궁금합니다.
만약 안사라진다면 리덕스를 이용해서는 로그인기능을 구현하면안되는건가요?
export const LoginUser = createAsyncThunk('LOGIN_USER', async (data) => {
return axios.post('/api/user/login', data).then((response) => response.data);
});
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {},
extraReducers: (builder) => {
builder.addCase(LoginUser.fulfilled, (state, { payload }) => {
state.loginSuccess = payload;
});
},
});
