localStorage操作统一使用localStorageUtils完成

bookshelfplus-frontend/public/assets/javascripts/localStorageUtils.js

@@ -0,0 +1,68 @@
+// 统一 localStorage 的读取与写入
+
+var localStorageUtils = {
+    // 检查浏览器 localStorage 是否支持
+    checkLocalStorage: function () {
+        try {
+            localStorage.setItem('test', 'test');
+            localStorage.removeItem('test');
+            return true;
+        } catch (e) {
+            alert("您的浏览器不支持localStorage，请更换浏览器！");
+            window.location.href = "/";
+            return false;
+        }
+    },
+
+    // 获取 localStorage
+    get: function (key) {
+        return localStorage.getItem(key);
+        // return JSON.parse(localStorage.getItem(key));
+    },
+    // 设置 localStorage
+    set: function (key, value) {
+        localStorage.setItem(key, value);
+        // localStorage.setItem(key, JSON.stringify(value));
+    },
+    // 删除 localStorage
+    remove: function (key) {
+        localStorage.removeItem(key);
+    },
+    // 清空 localStorage
+    clear: function () {
+        localStorage.clear();
+    },
+
+    // 用户登录
+    userLogin: function ({ token, is_admin }) {
+        this.set('token', token);
+        this.set('is_admin', is_admin);
+    },
+
+    // 用户退出登录
+    userLogout: function () {
+        this.remove('token');
+        this.remove('is_admin');
+    },
+
+    // 获取用户登录信息 (从浏览器本地缓存读取)
+    getUserLogin: function () {
+        return {
+            token: this.get('token'),
+            is_admin: this.get('is_admin')
+        }
+    },
+    getToken: function () {
+        return this.get('token');
+    },
+    getIsAdmin: function () {
+        return this.get('is_admin') === 'true';
+    },
+    getIsUser: function () {
+        return this.get('is_admin') === 'false';
+    },
+
+    getLoginStatus: function () {
+        return !!this.get('token') && !!this.get('is_admin');
+    },
+};

bookshelfplus-frontend/views/book.html

@@ -40,7 +40,7 @@
             cursor: pointer;
             opacity: 0;
             transition: all 0.3s;
-            position: relative;;
+            position: relative;
         }
         .download-link:hover #download-icon {
             width: 1.2em;
@@ -141,12 +141,14 @@
         var favortiesIcon = false;
         // 获取用户收藏信息
         function getUserFavouritesStatus() {
-            if(!localStorage || !localStorage.getItem("token") || !localStorage.getItem("is_admin")) {
+            localStorageUtils.checkLocalStorage();
+
+            if (!localStorageUtils.getLoginStatus()) {
                 // 用户未登录
                 $("#favorties-button").css("visibility", "visible");
                 return;
             }
-            postRequest("/book/getFavoritesStatus", { token: localStorage.getItem("token"), bookId: bookId })
+            postRequest("/book/getFavoritesStatus", { token: localStorageUtils.getToken(), bookId: bookId })
                 .then(function (responseData) {
                     var axiosData = responseData.data;
                     var status = axiosData.status;
@@ -166,8 +168,7 @@
                     } else {
                         if (data.errCode == "20004") {
                             // 登陆过期，小问题，这里不弹窗显示
-                            localStorage.removeItem("token");
+                            localStorageUtils.userLogout();
-                            localStorage.removeItem("is_admin");
                         } else {
                             alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
                         }
@@ -185,7 +186,7 @@
             if (requestingFlag) return;
             requestingFlag = true;
             $("#favorties-button").css("opacity", "0.3");
-            postRequest("/book/toggleFavorites", { token: localStorage.getItem("token"), bookId: bookId, status: toggleStatus ? 1 : 0 })
+            postRequest("/book/toggleFavorites", { token: localStorageUtils.getToken(), bookId: bookId, status: toggleStatus ? 1 : 0 })
                 .then(function (responseData) {
                     var axiosData = responseData.data;
                     var status = axiosData.status;

bookshelfplus-frontend/views/callback.html

@@ -9,6 +9,7 @@
     <!-- <script src="/assets/lib/jquery/3.6.0/jquery.min.js"></script> -->
     <script src="/assets/lib/axios/0.26.1/axios.min.js"></script>
     <script src="/assets/javascripts/httpRequest.js"></script>
+    <script src="/assets/javascripts/localStorageUtils.js"></script>
     <script>
         // API地址
         const APIHOST = '<%= global.site.api.prefix %>';
@@ -18,11 +19,12 @@
 
 <body>
     <p id="displayText">
-        正在跳转中，请稍后...
+        正在跳转中，请稍候...
     </p>
     <script>
         // 带 token 的为绑定第三方账号，不带 token 的为第三方登录
-        getRequest("/third-party/callback/<%=platform%>" + location.search + (localStorage.getItem("token") ? ("&token=" + localStorage.getItem("token")) : ""))
+        var token = localStorageUtils.getToken();
+        getRequest("/third-party/callback/<%=platform%>" + location.search + (token ? ("&token=" + token) : ""))
             .then(function (response) {
                 var axiosData = response.data;
                 var status = axiosData.status;
@@ -30,7 +32,7 @@
                 if (status === "success") {
                     console.log(data)
                     // 默认直接跳转 user 后台，如果是管理员则由 user 后台跳转
-                    if(localStorage.getItem("token")) {
+                    if (token) {
                         // 绑定第三方账号
 
                         // 绑定第三方账号成功
@@ -38,13 +40,13 @@
                         location.href = "/dashboard/user/myAccount";
                     } else {
                         // 第三方登录成功
-                        localStorage.setItem("token", data.token);
+                        localStorageUtils.userLogin({
-                        // alert("登录成功");
+                            token: data.token,
-                        if(data.group === "ADMIN") {
+                            is_admin: data.group === "ADMIN",
-                            localStorage.setItem("is_admin", "true");
+                        });
+                        if (localStorageUtils.getIsAdmin()) {
                             window.location.href = "/dashboard/admin/index";
                         } else {
-                            localStorage.setItem("is_admin", "false");
                             window.location.href = "/dashboard/user/index";
                         }
                     }

bookshelfplus-frontend/views/component/header.html

@@ -9,6 +9,7 @@
 <script src="/assets/lib/axios/0.26.1/axios.min.js"></script>
 
 <script src="/assets/javascripts/httpRequest.js"></script>
+<script src="/assets/javascripts/localStorageUtils.js"></script>
 <script>
     // API地址
     const APIHOST = '<%= global.site.api.prefix %>';

bookshelfplus-frontend/views/component/navbar.html

@@ -16,8 +16,9 @@
     </div>
 </div>
 <script>
-    if (localStorage.getItem("token"))
+    if (localStorageUtils.getLoginStatus()) {
         $("#dashboard").html("后台");
+    }
 
     function navbarHighlight() {
         // 导航栏中突出当前页面

bookshelfplus-frontend/views/dashboard/admin/Debug.html

@@ -1,5 +1,5 @@
 <script>
-    postRequest('/debug/status', { token: localStorage.getItem("token") })
+    postRequest('/debug/status', { token: localStorageUtils.getToken() })
         .then(function (response) {
             var axiosData = response.data;
             var status = axiosData.status;

bookshelfplus-frontend/views/dashboard/component/account-cancellation.html

@@ -65,7 +65,7 @@
             alert("请输入您的密码");
             return;
         }
-        postRequest("/user/cancelAccount", { token: localStorage.getItem("token"), password: accountCancellationPassword })
+        postRequest("/user/cancelAccount", { token: localStorageUtils.getToken(), password: accountCancellationPassword })
             .then(function (response) {
                 var axiosData = response.data;
                 var status = axiosData.status;

bookshelfplus-frontend/views/dashboard/component/header.html

@@ -9,6 +9,7 @@
 <script src="/assets/lib/axios/0.26.1/axios.min.js"></script>
 
 <script src="/assets/javascripts/httpRequest.js"></script>
+<script src="/assets/javascripts/localStorageUtils.js"></script>
 <script>
     // API地址
     const APIHOST = '<%= global.site.api.prefix %>';
@@ -16,15 +17,14 @@
 </script>
 <% if (group == "admin") {%>
 <script>
-    // <%= group %>
+    if(localStorageUtils.getIsUser()) {
-    if(localStorage.getItem("is_admin") === "false") {
         // 是普通用户，跳转到普通用户后台页面
         window.location.href = "/dashboard/user/index";
     }
 </script>
 <%} else {%>
 <script>
-    if(localStorage.getItem("is_admin") === "true") {
+    if(llocalStorageUtils.getIsAdmin()) {
         // 是管理员用户，跳转到管理员用户后台页面
         window.location.href = "/dashboard/admin/index";
     }
@@ -32,18 +32,14 @@
 <%}%>
 <script>
     function getUserStatus() {
-        if(!localStorage) {
+        localStorageUtils.checkLocalStorage();
-            alert("浏览器不支持 localStorage ，请更换浏览器");
+
+        if(!localStorageUtils.getLoginStatus()) {
+            localStorageUtils.userLogout();
             window.location.href = "/";
         }
 
-        if(!localStorage.getItem("token") || !localStorage.getItem("is_admin")) {
+        postRequest("/user/getUserStatus", { token: localStorageUtils.getToken() })
-            localStorage.removeItem("token");
-            localStorage.removeItem("is_admin");
-            window.location.href = "/";
-        }
-
-        postRequest("/user/getUserStatus", { token: localStorage.getItem("token") })
             .then(function (responseData) {
                 var axiosData = responseData.data;
                 var status = axiosData.status;
@@ -57,8 +53,7 @@
                     }
                 } else {
                     if(data.errCode == "20004") { // 登陆过期
-                        localStorage.removeItem("token");
+                        localStorageUtils.userLogout();
-                        localStorage.removeItem("is_admin");
                         window.location.href = "/login";
                     }
                     alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);

bookshelfplus-frontend/views/dashboard/component/navbar.html

@@ -16,7 +16,7 @@
 </div>
 <script>
     function logout() {
-        postRequest("/user/logout", { token: localStorage.getItem("token") })
+        postRequest("/user/logout", { token: localStorageUtils.getToken() })
             .then(function (response) {
                 var axiosData = response.data;
                 var status = axiosData.status;
@@ -25,8 +25,7 @@
                 if (status === "success") {
                     console.log(data);
                     if (data) {
-                        localStorage.removeItem("token");
+                        localStorageUtils.userLogout();
-                        localStorage.removeItem("is_admin");
                         location.href = "/login";
                     } else {
                         alert("退出登录失败");
@@ -39,8 +38,7 @@
                 console.log(error);
                 var choice = confirm("服务器连接失败，无法正常退出登录，是否要强行退出登录？");
                 if(choice) {
-                    localStorage.removeItem("token");
+                    localStorageUtils.userLogout();
-                    localStorage.removeItem("is_admin");
                     location.href = "/login";
                 }
             });

bookshelfplus-frontend/views/dashboard/component/third-party-manage.html

@@ -8,7 +8,7 @@
 </div>
 <script>
     function thirdPartyWithdraw(platform) {
-        postRequest("/third-party/withdrawThirdPartyBings", { token: localStorage.getItem("token"), platform: platform })
+        postRequest("/third-party/withdrawThirdPartyBings", { token: localStorageUtils.getToken(), platform: platform })
             .then(function (response) {
                 var axiosData = response.data;
                 var status = axiosData.status;
@@ -30,8 +30,8 @@
                 alert("无法连接到服务器，请检查网络连接！");
             });
     }
-    if (localStorage.getItem("token") != null) {
+    if (localStorageUtils.getLoginStatus() != null) {
-        getRequest("/third-party/getBindingStatus", { token: localStorage.getItem("token") })
+        getRequest("/third-party/getBindingStatus", { token: localStorageUtils.getToken() })
             .then(function (response) {
                 var axiosData = response.data;
                 var status = axiosData.status;

bookshelfplus-frontend/views/login.html

@@ -35,23 +35,16 @@
         }
     </style>
     <script>
-        if(!localStorage) {
+        localStorageUtils.checkLocalStorage();
-            alert("您的浏览器不支持localStorage，请更换浏览器！");
-            window.location.href = "/";
-        }
 
-        if(localStorage.getItem("token")) {
+        if(localStorageUtils.getToken()) {
             // 用户已登录
-            if(localStorage.getItem("is_admin") === "true") {
+            if(localStorageUtils.getIsAdmin()) {
                 // 是管理员
                 window.location.href = "/dashboard/admin/index";
-            } else if(localStorage.getItem("is_admin") === "false") {
+            } else {
                 // 是普通用户
                 window.location.href = "/dashboard/user/index";
-            } else {
-                // 未知状态
-                localStorage.removeItem("token");
-                localStorage.removeItem("is_admin");
             }
         }
     </script>
@@ -113,9 +106,15 @@
         $(".btn-submit").click(function () {
             if ($("#username").val() === "" || $("#password").val() === "") {
                 alert("用户名或密码不能为空！");
+                if ($("#username").val() === "") {
+                    $("#username").focus();
+                } else {
+                    $("#password").focus();
+                }
                 return;
             }
 
+            // 避免用户重复点击
             if (isOnLogin) return;
             isOnLogin = true;
 
@@ -124,8 +123,7 @@
             // var encryptpwd = hex_sha1(password);
             // var encryptpwd = hex_md5(password);
 
-            localStorage.removeItem("token");
+            localStorageUtils.userLogout();
-            localStorage.removeItem("is_admin");
             postRequest("/user/login", { username: username, password: password })
                 .then(function (response) {
                     var axiosData = response.data;
@@ -135,13 +133,13 @@
                     if (status === "success") {
                         console.log(data);
                         if (data) {
-                            localStorage.setItem("token", data.token);
+                            localStorageUtils.userLogin({
-                            // alert("登录成功");
+                                token: data.token,
-                            if(data.group === "ADMIN") {
+                                is_admin: data.group === "ADMIN",
-                                localStorage.setItem("is_admin", "true");
+                            });
+                            if (localStorageUtils.getIsAdmin()) {
                                 window.location.href = "/dashboard/admin/index";
                             } else {
-                                localStorage.setItem("is_admin", "false");
                                 window.location.href = "/dashboard/user/index";
                             }
                         } else {

bookshelfplus-frontend/views/register.html

@@ -34,12 +34,6 @@
             width: 72px;
         }
     </style>
-    <script>
-        if(!localStorage) {
-            alert("您的浏览器不支持localStorage，请更换浏览器！");
-            window.location.href = "/";
-        }
-    </script>
 </head>
 <body>
     <%- include("./component/navbar.html"); %>
@@ -66,6 +60,8 @@
     <%- include("./component/footer.html"); %>
 
     <script>
+        localStorageUtils.checkLocalStorage();
+
         $("#username").val("xiaomo");
         $("#password").val("123456");
         $(".btn-register").click(function() {
@@ -81,13 +77,14 @@
                     if (status === "success") {
                         console.log(data);
                         if(data) {
-                            localStorage.setItem("token", data.token);
+                            localStorageUtils.userLogin({
+                                token: data.token,
+                                is_admin: data.group === "ADMIN",
+                            });
                             alert("注册成功");
-                            if(data.group === "ADMIN") {
+                            if (localStorageUtils.getIsAdmin()) {
-                                localStorage.setItem("is_admin", "true");
                                 window.location.href = "/dashboard/admin/index";
                             } else {
-                                localStorage.setItem("is_admin", "false");
                                 window.location.href = "/dashboard/user/index";
                             }
                         } else {