[Vue.js] 로컬 스토리지(localStorage)를 활용한 간단한 로그인 & 로그아웃 기능 만들기

Vue3, Vue Router, axios를 활용하여 간단하게 로그인 & 로그아웃 기능을 구현해보고자 한다. 

기능정의는 아래와 같다.

 

1. 사용자가 로그인 정보 입력 후 Login 버튼 클릭시 axios를 활용하여 post요청

2. 로그인 성공시 다른페이지로 route 이동 & 로그인 실패시 alert

3. 로그인 성공 후 새로고침해도 로그인 정보 값이 유지되기 위해 로그인 상태값을 생성하여 로컬스토리지에 저장

4. 로컬스토리지에 로그인 상태값이 없을시 로그인 페이지로 리디렉션 & 다른 url 접근은 불가.

 

*) 단순 기능 기록 목적을 위한 것 이기 때문에 props,emit을 이용한 데이터 처리 or Vuex를 활용한 코드는 스킵

 

 

1. Login.vue 에서 로그인 기능 작업

- id,비밀번호 input의 값이 비어있으면 안되기때문에 input에 requird 속성 추가

- userId, userPassword 데이터 생성 및 v-model을 활용한 양방향 데이터 처리

- methods 항목에 login 함수 생성

- 사용자가 입력한 로그인 정보 axios 라이브러리를 활용한 post요청 

- 로그인 성공시 새로고침해도 로그아웃이 되지 않도록 로컬스토리지에 로그인 상태값 생성

- 로그인 완료시 '/main'으로 이동

// Login.vue

<template>
    <form @submit.prevnet="login">
        <input type="text" v-model="userId" requird />
        <input type="password" v-model="userPassword" requird />
        <button type="submit">LOGIN</button>
    </form>
</template>

<script>
export default {
    name: "Login"
    
    data() {
        return {
            userId: "",
            userPassword: "",
        }
    },
    
    methods: {
        //로그인 기능 함수
        login() {
            //사용자 입력로그인 정보 post 요청
            axios.post('/api/login',{
                id: this.userId,
                password: this.userPassword,
            })
            .then( (response) => {
                //요청 성공시 데이터 값 담아 둘 변수 선언
                const responseData = response.data;
                
                //사용자가 입력한 로그인 정보 일치 할 때 처리
                if(responseData.status === true) {
                    //로컬스토리지에 로그인 상태 값 생성
                	localStorage.setItem("loginStatus",true);
                    
                    // 로그인 완료 시 router이동
                    this.$router.push('/main');
                }
            })
            .catch( (err) => {
            	if(err) {
                    alert('로그인이 실패하였습니다');
                }
            });
        }
    }
}
</scritp>

 

2. Main.vue 에서 로그아웃 기능 작업

- userId, userPassword 데이터 값 초기화

(실제 작업시는 아이디,비밀번호 정보를 각 컴포넌트에 별도로 작성하는 것이 아닌, 상태 중앙 집중저장소인 Vuex를 활용하거나 props,emit을 활용해야한다. )

- 로컬 스토리지에 저장했던 로그인 상태 값을 삭제하여 다른 url로 접근 불가능 하도록 처리.

- 로그인 페이지로 이동

//Main.vue
<template>
	<button type="button" @click="logout()"></button>
</template>

export default {
    name: "Main",
    data() {
        return {
            userId: "",
            userPassword: ""
        }
    },
    methods: {
        //로그아웃 기능
        logout() {
            // 로그아웃시 아이디,패스워드 데이터 빈 문자열로 변경
            this.userId = "";
            this.userPassword = "";

            //로컬스토리지에서 로그인 상태 삭제
            localStorage.removeItem('loginStatus');

            //로그인페이지로 route 이동
            this.$router.push('/login');
        }
    }
}
</script>

 

3. routes.js에서 router정의 및 기능 작업

 

- login,main 각 페이지 router생성

- Vue Router의 네비게이션 가드를 사용하여 로컬스토리지의 loginStatus 값을 확인하여 페이지 접근 가능 여부를 판별하는 로직을 생성. loginStatus값이 true라면 사용자가 요청한 페이지로 접근 가능, 그렇지 않다면 login 페이지로 리디렉션 되도록 처리

// routes.js
import { createWebHistory, createRouter } from "vue-router";
import Login from "./components/Login.vue";
import Main from "./components/Main.vue";

const routes = [
    {
        name: "login"
        path: "/login"
        component: Login
    },
    {
        name: "main"
        path: "/main"
        component: Main,
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

//로그인 상태 값이 없을때 login페이지를 제외한 url 접근 제한
router.beforeEach((to, from, next) => {
    const isLogin = localStorage.getItem('loginStatus');
    
    if(to.name !== "login") {
        (isLogin === "true") ? next() : next({name: "login"})
    } else {
        next();
    }
});

 

 

 

기본적인 기능은 위와같이 구현 할 수 있다. 다만 위에서 거론한 것 처럼 진행중인 프로젝트에서 데이터를 Vuex를 활용한 상태 중앙집중관리소에서 다루는지, props로 상속받고 emit,커스텀 이벤트를 사용하는지 코드를 일부 변형해서 사용해야한다.