get user data

config.js

@@ -8,7 +8,9 @@ config.shanbay = {
     auth_success_url:   "oauth2/auth/success/",
     client_id:          "ac0c52067dff084491bb",
     response_type:      "token",
-    call_back:          "https://api.shanbay.com/oauth2/auth/success/"
+    call_back:          "https://api.shanbay.com/oauth2/auth/success/",
+    account_url:        "/account/",
+    search_url:         "/bdc/search/",
 };
 
 module.exports = config;

main.js

@@ -3,11 +3,12 @@ const path = require("path");
 const url = require("url");
 const config = require("./config");
 const util = require("./src/js/util");
+const Store = require("electron-store");
 
 /*
  * Start in development mode
  */
-process.env.NODE_ENV = "development"
+process.env.NODE_ENV = "development";
 if (process.env.NODE_ENV !== "development") {
     console.log = function() {}
 }
@@ -34,6 +35,7 @@ const k_viewPaths = Object.freeze({
  */
 let wins = {}; // keep global references to windows
 let forceQuit = false;
+const store = new Store();
 
 function setMessageListener() {
     ipcMain.on("login", (event, arg) => {
@@ -77,6 +79,8 @@ function setMessageListener() {
                 closeAuthWindow();
             } else if (tokenMatch && expiresMatch) {
                 var expired_at = new Date((new Date()).getTime() + parseInt(expiresMatch[1]) * 1000);
+                console.log(tokenMatch[1]);
+                console.log(expired_at);
                 util.user.setToken(tokenMatch[1], expired_at);
                 indexSender.send("login-success");
                 closeAuthWindow();

package.json

@@ -21,6 +21,7 @@
   "homepage": "https://github.com/NeilLi1992/Electron-Shanbay#readme",
   "dependencies": {
     "electron": "^1.7.10",
+    "electron-store": "^1.3.0",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
     "materialize-css": "^0.100.2",

src/css/index-customize.css

@@ -9,4 +9,8 @@ span.pos-label {
     background-color: #26a69a;
     display: inline-block;
     padding: 0 0.8em;
+}
+
+div#user-view {
+    text-align: center;
 }

src/html/index.html

@@ -22,6 +22,22 @@ <h3><center>扇贝桌面版</center></h3>
                 <div v-if="!hasLogin">
                     <a v-on:click="onLogin" href="javascript:;">请登录</a>
                 </div>
+                <div v-else-if="user" id="user-view">
+                    <img v-bind:src="user.avatar" alt="头像错误" width="50px">{{ user.nickname }}
+
+                    <!-- Dropdown Trigger -->
+  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
+
+  <!-- Dropdown Structure -->
+  <ul id='dropdown1' class='dropdown-content'>
+    <li><a href="#!">one</a></li>
+    <li><a href="#!">two</a></li>
+    <li class="divider"></li>
+    <li><a href="#!">three</a></li>
+    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
+    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
+  </ul>
+                </div>
             </div>
         </div>
 

src/js/index.js

@@ -28,7 +28,8 @@ util.loadVueP()
     });
 
     ipcRenderer.on("login-success", () => {
-        alert("登录成功, token=", localStorage.access_token, ", expired_at=", localStorage.expired_at);
+        console.log("登录成功, access_token=", util.user.getToken());
+        console.log("登录成功, expired_at=", util.user.getExpiredAt());
     });
 })
 .then(function() {  // start vue app
@@ -39,7 +40,37 @@ util.loadVueP()
             view: k_view.init,
             word: null,
             error: null,
-            hasLogin: util.user.tokenValid()
+            hasLogin: util.user.tokenValid(),
+            user: null,
+        },
+        /*
+         * When Vue app is mounted and ready
+         */
+        mounted: function() {
+            let that = this;
+            this.$nextTick(function() {
+                if (util.user.tokenValid()) {
+                    util.user.getUserP()
+                    .then(function(user) {
+                        console.log("user data:", user);
+                        that.user = user;
+                        $('.dropdown-button').dropdown({
+                            inDuration: 300,
+                            outDuration: 225,
+                            constrainWidth: false, // Does not change width of dropdown to that of the activator
+                            hover: true, // Activate on hover
+                            gutter: 0, // Spacing from edge
+                            belowOrigin: false, // Displays dropdown below the button
+                            alignment: 'left', // Displays dropdown with edge aligned to the left of button
+                            stopPropagation: false // Stops event propagation
+                          }
+                        );
+                    })
+                    .catch(function(error) {
+                        console.log("error:", error);
+                    });
+                }
+            });
         },
         methods: {
             onFocus: function() {

src/js/util.js

@@ -2,6 +2,10 @@
 
 var rp = require("request-promise-native");
 var _ = require("lodash");
+const Store = require("electron-store");
+const config = require("../../config");
+
+const store = new Store();
 
 module.exports = {
      /*
@@ -36,7 +40,7 @@ module.exports = {
     searchWordP: function(word) {
         console.log("in searchWordP, word=", word);
         let options = {
-            url: "https://api.shanbay.com/bdc/search/",
+            url: config.shanbay.api_root + config.shanbay.search_url,
             qs: {
                 word: word
             },
@@ -98,22 +102,44 @@ module.exports = {
     },
     user: {
         tokenValid: function() {
-            return localStorage.access_token !== undefined && !this.tokenExpired();
+            return store.get("access_token") !== undefined && !this.tokenExpired();
         },
         tokenExpired: function() {
-            var expired_at = localStorage.expired_at;
+            var expired_at = store.get("expired_at");
             return expired_at === undefined || new Date(expired_at) < new Date();
         },
         clearToken: function() {
-            delete localStorage.access_token;
-            delete localStorage.expired_at;
+            store.delete("access_token");
+            store.delete("expired_at");
         },
         getToken: function() {
-            return localStorage.access_token;
+            return store.get("access_token");
+        },
+        getExpiredAt: function() {
+            return store.get("expired_at");
         },
         setToken: function(access_token, expired_at) {
-            window.localStorage.access_token = access_token;
-            window.localStorage.expired_at = tokenExpired;
+            store.set("access_token", access_token);
+            store.set("expired_at", expired_at);
+        },
+        getUserP: function() {
+            if (!this.tokenValid()) {
+                return Promise.resolve({
+                    username: null,
+                    nickname: null,
+                    id: null,
+                    avatar: null
+                });
+            } else {
+                let options = {
+                    url: config.shanbay.api_root + config.shanbay.account_url,
+                    qs: {
+                        access_token: this.getToken()
+                    },
+                    json: true
+                }; 
+                return rp(options);
+            }
         }
     }
 };