Apps Script用Sheet生成動態網頁(14): 處理使用者登入/出狀態(LocalStorage)
在上一篇中我們完成用Local Storage改寫會員登入機制，這篇繼續來改寫首頁的使用者登入狀態及登出功能。先前的登入token是寫在?參數列上，現在要改成讀取Local Storage。
之前我首頁的登入出狀態是在 Apps Script用Sheet生成動態網頁(10): 處理使用者登入token及登出功能 中有描述。然後經過doGet()重構之後，我們將首頁從程式碼裡面給獨立出來，變成index.html和app.js.html，然後doGet若給予不認識的參數，就預設會呈現首頁出來。
因為首頁已經將javascript程式碼獨立放置在app.js.html中，所以我們登出入狀態只需要改動這個檔案。為因應token從?參數列改成Local Storage我們有兩個功能要調整
- 登出使用者
- 登入狀態顯示
接著我們就開始改寫囉!
1. 登出使用者
登出使用者之前的實做是透過把token丟掉來完成，再移除URL中的token讓使用者以為已經登出。而現在token都在Local Storage中，可以很容易的透過locastorage.removeItem()將token丟掉。然後再移動到首頁即可。
因為首頁已設定base標籤，所以我們直接用document.baseURI就會讓它回首頁。注意：這裡location不能指定成 / ，這樣做會回到Apps Script的首頁，而不是我們的首頁哦!
function dropToken(event) {
if (event) event.preventDefault()
localStorage.removeItem('user-token');
window.top.location = document.baseURI;
}
2. 登入狀態顯示
原本是透過google.script.url.getLocation()來取得?參數中的token，現在直接從Local Storage裡面取出來即可，整體簡化了許多。
var token = localStorage.getItem('user-token');
console.log('token', token);
google.script.run.withSuccessHandler(hasLogined)
.withFailureHandler(notLogin)
.authLogin(token);
經過這樣的小改，就完成了
留言