대부분의 어플에 있는 자동로그인을 설정하는 법을 알아보자!
자동 로그인 기능을 하기 위해서는 AsyncStoage 를 모두 세팅 해 둔 상태여야 한다.
내 프로젝트의 AsyncStorage 세팅 같은 경우는
import AsyncStorage from '@react-native-async-storage/async-storage';
// get
export const getStorage = async (key) => {
const result = await AsyncStorage.getItem(key);
return result && JSON.parse(result);
};
// set
export const setStorage = async (key, value) => {
return await AsyncStorage.setItem(key, JSON.stringify(value));
};
// remove
export const removeStorage = async (key) => {
return await AsyncStorage.removeItem(key);
};
이렇게 되어있다.
그럼 이제 본격적으로 자동로그인을 설정해보자!
로그인 화면에 자동로그인 버튼을 하나 설정해두자
그리고 로그인 로직 성공후 자동로그인 여부를 체크하여 스토리지에 저장해주면 끝!
export const sendLogin = async () => {
if (addData?.email && addData?.password) {
await restApi
.post('/account/signin', {
email: addData?.email,
password: addData?.password,
})
.then(async (res) => {
// console.log(res.data)
// res 값 asyncstorage로 저장
if (res.data.message === 'OK') {
const token = res.data.payload.access_token;
const refreshtoken = res.data.payload.refresh_token;
setStorage('token', token);
setStorage('refreshToken', refreshtoken);
setStorage('autoLogin', true);
} else {
}
})
.catch((err) => {});
} else {
setModal(true), setText( `모두 입력해 주세요!`);
}
};
이렇게 저장된 autoLogin 스토리지는 자동로그아웃(토큰만료 혹은 중복로그인 등), 수동 로그아웃을 제외하고는 어플을 켰을 때 항상 체크되어 자동으로 로그인이 되어야 한다.그럼 이 로직은 어디에 넣지?
내가 했던 프로젝트의 경우에는 첫 화면인 로그아웃에 해당 페이지에 들어갈 때마다 스토리지에서 autoLogin이 트루인지 체크하는 로직을 useEffect를 사용해서 체크해주었다.
useEffect(() => {
getStorage('refreshToken').then((v) => {
if (v) {
getStorage('autoLogin').then((z) => {
if (z) {
navigation.navigate('Main');
}
});
}
});
}, []);
refresh토큰 만료 이후에 혹시 모를 오류를 방지하기 위해서 refresh토큰 확인하는 로직도 넣어뒀다. 또한 위에서 말했던 자동로그아웃(refresh토큰 만료 혹은 중복로그인 등), 수동 로그아웃 시에는 해당 부분이 사라져야 하기 때문에 위의 두 경우에 autoLogin 항목을 제거시켜주었다.
<Text
onPress={() => {
removeStorage('token');
removeStorage('refreshToken');
removeStorage('autoLogin');
navigation.dispatch(
CommonActions.reset({
routes: [{ name: 'Login' }],
}),
);
navigation.navigate('Login');
}}
>
로그아웃
</Text>
중복로그인 등으로 자동으로 로그아웃이 되었다면 navigation에서 체크하여 삭제하고 메인으로 돌려보내줘야한다. 이 부분에 대한 설명은 이전 블로그 글에 적어 두었으니 그쪽에서 확인해주면된다!