32. 로그아웃

32. 로그아웃

sessionStorage에 저장된 토큰을 제거하는 것으로 로그아웃을 구현한다.

• 로그아웃 페이지 라우터 추가

1. 로그아웃 파일 생성

로그아웃 파일 생성

2. 라우터 추가

2-1. index.js

import { createWebHistory, createRouter } from "vue-router";

import Home from '@/components/Home'

import Join from '@/components/Join'

import Login from '@/components/Login'

import Logout from '@/components/Logout'

const routes = [

    {path:'/',  name:'Home', component:Home},

    {path:'/Join',  name:'Join', component:Join},

    {path:'/Login',  name:'Login', component:Login},

    {path:'/Logout',  name:'Logout', component:Logout},

]

const router = createRouter({

    history: createWebHistory(),

    routes,

});

export default router;

 

2-2. App.vue

 

<template>

  <div id="nav">

    <router-link to="/">home</router-link>|

    <router-link to="/Join">Join</router-link>|

    <router-link to="/Login">Login</router-link>|

    <router-link to="/Logout">Logout</router-link>|

    <hr />

    <router-view />

  </div>

</template>

<script>

</script>

<style>

</style>

• 화면 확인

화면 확인

• 로그아웃 구현

<template>

    <div>

    </div>

</template>

<script>

    export default {

        async created() {

            const result = confirm("로그아웃 하시겠습니까?");

            console.log(result)

            if(result) {

                sessionStorage.removeItem("TOKEN");

                this.$router.push({name:'Home'}); //성공 시 home으로 이동

            }

        }

    }

</script>

<style scoped>

</style>

• 로그아웃

1. 로그인 후 토큰 저장

로그인 후 토큰 저장

2. 로그아웃 취소

로그아웃 취소

토큰이 유지된다

2. 로그아웃 확인

로그아웃 확인

토큰이 삭제된다