로그인 페이지와 가입하기 페이지 외 다른 페이지들은 인증된 유저만 사용 가능하도록
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"
>
<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 };
자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기
의견 보내기 자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Firebase 인증을 사용해서
firebase.google.com
'FRONTEND > Vue' 카테고리의 다른 글
| [Vue3 + vite + tailwindCSS] tweet 입력 및 firebase 저장 (0) | 2024.03.22 |
|---|---|
| [Vue3 + vite + tailwindCSS] firestore정보 사용하기 & 현재 메뉴 색 변경하기 (0) | 2024.03.20 |
| [Vue3 + vite + tailwindCSS] Vuex , vuex-persistedstate (0) | 2024.03.19 |
| [Vue3 + vite + tailwindCSS] firebase 로그인 페이지(인증) (0) | 2024.03.19 |
| [Vue3 + vite + tailwindCSS] firestore에 db(유저정보) 저장하기 (0) | 2024.03.16 |