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. 登出使用者
  2. 登入狀態顯示

接著我們就開始改寫囉!

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);

經過這樣的小改,就完成了


留言