ログイン状態を確認しよう

s-yoshiii · Jul 19, 2022 · 2148a77 · 2148a77
1 parent 04bde6d
commit 2148a77
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/src/components/layouts/SideBar.vue b/src/components/layouts/SideBar.vue
@@ -15,10 +15,12 @@
         </v-list-item-content>
       </v-list-item>
       <v-list-item @click="logout">
-        <v-list-item-icon><v-icon>mdi-logout</v-icon></v-list-item-icon>
-        <v-list-item-content
-          ><v-list-item-title>Logout</v-list-item-title></v-list-item-content
-        >
+        <v-list-item-icon>
+          <v-icon>mdi-logout</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>Logout</v-list-item-title>
+        </v-list-item-content>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>
@@ -55,10 +57,6 @@ export default {
 <style lang="scss">
 nav {
   a {
-    font-weight: bold;
-    color: #2c3e50;
-    text-align: left;
-
     &.router-link-exact-active {
       color: #42b983;
     }
@@ -68,6 +66,11 @@ nav {
   background-color: #757575 !important;
   border-color: #757575 !important;
 }
+.v-list-item {
+  font-weight: bold;
+  color: #2c3e50;
+  text-align: left;
+}
 .v-application .pa-4 {
   padding: 16px !important;
 }

diff --git a/src/router/index.js b/src/router/index.js
@@ -5,6 +5,7 @@ import UserList from "../views/UserList.vue";
 import ChatBoard from "../views/ChatBoard.vue";
 import LoginView from "../views/LoginView.vue";
 import SignupView from "../views/SignupView.vue";
+import firebase from "@/firebase/firebase";
 
 Vue.use(VueRouter);
 
@@ -13,6 +14,7 @@ const routes = [
     path: "/",
     name: "home",
     component: UserList,
+    meta: { requiresAuth: true },
   },
   {
     path: "/about",
@@ -46,4 +48,22 @@ const router = new VueRouter({
   routes,
 });
 
+router.beforeEach((to, from, next) => {
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
+  if (requiresAuth) {
+    firebase.auth().onAuthStateChanged((user) => {
+      if (!user) {
+        next({
+          path: "/login",
+          query: { redirect: to.fullPath },
+        });
+      } else {
+        next();
+      }
+    });
+  } else {
+    next();
+  }
+});
+
 export default router;