用Vue & Firebase 實作簡易購物網站10.會員登出、驗證(Firebase & Vuejs)
Published in
Jul 4, 2020
※成品連結：vue-shop-3b5cc.web.app
※程式碼(完成至第10篇的程式碼)：
(請在firebase.js檔中加入你的firebaseConfig內容)
10.會員登出、驗證(Firebase & Vuejs)
一、會員登出
(一)程式碼
1.components資料夾->於navbar.vue加上監聽事件(v-on)、判斷顯示內容(v-show):
(1)@click=”logout()”監聽登出事件
(2)v-show=”isLogin == ‘no’” 及 v-show=”isLogin == ‘yes’” 判斷顯示登入/登出的連結
(3)加上Menber-Center連結
(4)設定觸發的事件內容及登入/登出連結判斷
2.views資料夾->於user.vue加上:
(1)加上Logout連結
(2)設定Logout事件內容
二、會員驗證
(一)程式碼:
1.於router.js中加上以下內容:
(1)component: User後加上
meta: { requiresAuth: true }, // 登入前須經過驗證(2)export default router前加上
2.於main.js中加上以下內容:
(1)引入firebase
import {fb} from './firebase';(2)修改載入內容規則
