[Vue3 + vite + tailwindCSS] navigation guard 및 로그아웃

 

로그인 페이지와 가입하기 페이지 외 다른 페이지들은 인증된 유저만 사용 가능하도록 

 

navigation guard 를 설정해줄거임

 

 

 

routes 에 register 와 login  제외한 나머지 페이지에 

    requireAuth: true, 

를 추가한다. 

const routes = [

  {

    path: "/",

    component: Home,

    title: "홈",

    icon: "fas fa-home fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    component: Home,

    title: "탐색하기",

    icon: "fas fa-hashtag fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/notifications",

    component: Notifications,

    title: "알림",

    icon: "far fa-bell fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/messages",

    component: Messages,

    title: "쪽지",

    icon: "far fa-envelope fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    component: Home,

    title: "북마크",

    icon: "far fa-bookmark fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    component: Home,

    title: "리스트",

    icon: "far fa-list-alt fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/profile",

    component: Profile,

    title: "프로필",

    icon: "far fa-user fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    component: Home,

    title: "더보기",

    icon: "fas fa-ellipsis-h fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/register",

    component: Register,

    meta: { isMenu: false, layout: "EmptyLayout" },

  },

  {

    path: "/login",

    component: Login,

    meta: { isMenu: false, layout: "EmptyLayout" },

  },

];

 

const routes = [

  {

    path: "/",

    component: Home,

    title: "홈",

    icon: "fas fa-home fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/",

    component: Home,

    title: "탐색하기",

    icon: "fas fa-hashtag fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/notifications",

    component: Notifications,

    title: "알림",

    icon: "far fa-bell fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/messages",

    component: Messages,

    title: "쪽지",

    icon: "far fa-envelope fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/",

    component: Home,

    title: "북마크",

    icon: "far fa-bookmark fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/",

    component: Home,

    title: "리스트",

    icon: "far fa-list-alt fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/profile",

    component: Profile,

    title: "프로필",

    icon: "far fa-user fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/",

    component: Home,

    title: "더보기",

    icon: "fas fa-ellipsis-h fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout" },

    requireAuth: true,

  },

  {

    path: "/register",

    component: Register,

    meta: { isMenu: false, layout: "EmptyLayout" },

  },

  {

    path: "/login",

    component: Login,

    meta: { isMenu: false, layout: "EmptyLayout" },

  },

];

 

 

 

router.beforeEach((to, from, next) => {

  console.log(to);

  // not authenticated

  // router.push("/login")

  // authenticated

  next();

});

 

 

메인페이지에서 콘솔을 확인해보면

 

matched -> 0 -> meta ->  requireAuth가 true인것을 확인할 수 있다.

 

이걸 이용해서 네비게이션 가드를 만들것임

 

 

현재 유저정보를 가져온다.

 

 

그리고 DefaultLayout 에서 

 

드롭다운 메뉴를 추가한다.

    <!-- 프로필 드롭다운 메뉴 -->

    <div

      class="absolute bottom-20 left-12 shadow rounded-lg w-70"

      v-if="showProfileDropdown"

      @click="showProfileDropdown = false"

    >

      <button

        class="hover:bg-gray-50 border-b border-gray-100 flex p-3 w-full items-center"

      >

        <img src="http://picsum.photos/100" class="w-10 h-10 rounded-full" />

        <div class="mx-4">

          <div class="font-bold text-sm">dmsdl8917@ddddddd.com</div>

          <div class="text-left text-sm text-gray-500">@joeuni</div>

        </div>

        <i class="fas fa-check text-primary ml-auto"></i>

      </button>

      <button

        class="hover:bg-gray-50 p-3 w-full text-left text-sm"

        @click="onLogout"

      >

        @joeuni 계정에서 로그아웃

      </button>

    </div>

  </div>

</template>

 

 

 

 

아래의 프로필을 클릭하면 위로 드롭다운이 펼쳐지게 만들거라서 

 

함수를 추가한다.

    const showProfileDropdown = ref(false);

 

리턴으로 사용할 수 있게 만들어주고

    return { routes, showProfileDropdown, onLogout };

  },

};

 

 

      <!-- 프로필 버튼 -->

      <div class="xl:mr-3 mb-3" @click="showProfileDropdown = true">

        <button

 

프로필버튼을 클릭하면  showProfileDropdown 이 true로 변경되게 클릭함수를 추가한다.

    <!-- 프로필 드롭다운 메뉴 -->

    <div

      class="absolute bottom-20 left-12 shadow rounded-lg w-70"

      v-if="showProfileDropdown"

      @click="showProfileDropdown = false"

    >

 

드롭다운은 v-if로 showProfileDropdown이 true일 때만 보여주고 

다시 클릭하면 false로 변경한다. 

 

그리고 로그아웃 버튼을클릭하면 onLogout함수가 실행되게 한다. 

      <button

        class="hover:bg-gray-50 p-3 w-full text-left text-sm"

        @click="onLogout"

      >

        @joeuni 계정에서 로그아웃

      </button>

 

 

import { signOut } from "firebase/auth";

import { auth } from "../firebase";

import store from "../store";

 

로그아웃 함수는 auth로 로그아웃을 실행하고 

store에 현재 로그인 중인 유저를 null로 변경한다 

그 뒤 router.replace로 login페이지로 이동시킴 

    //로그아웃 함수

    const onLogout = async () => {

      await signOut(auth);

      store.commit("SET_USERS", null);

      await router.replace("./login");

    };

    return { routes, showProfileDropdown, onLogout };

 

 

https://firebase.google.com/docs/auth/web/password-auth?hl=ko&_gl=1*k88n5b*_up*MQ..*_ga*NTI3NzMyNTQwLjE3MTA5MzMyNzA.*_ga_CW55HF8NVT*MTcxMDkzMzI3MC4xLjAuMTcxMDkzMzI3MC4wLjAuMA..

자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기