4.3 配置Mysql与注册登录模块（下）

backend/src/main/java/com/kob/backend/controller/service/impl/user/account/RegisterServiceImpl.java

@@ -81,7 +81,7 @@ public class RegisterServiceImpl implements RegisterService {
         userMapper.insert(user);
 
         // 返回success表示注册成功
-        map.put("error_msg","success!");
+        map.put("error_msg","success");
         return map;
 
     }

web/src/components/NavBar.vue

@@ -29,7 +29,7 @@
         </li>
       </ul>
 
-      <ul class="navbar-nav" v-else>
+      <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">
         <li class="nav-item ">
             <router-link class="nav-link" :to="{name: 'login'}" role="button">登录</router-link>
         </li>

web/src/router/index.js

@@ -6,47 +6,71 @@ import UserBotIndexView from '../views/user/bot/UserBotIndexView'
 import NotFound from '../views/error/NotFound'
 import UserLoginView from "@/views/user/account/UserLoginView"
 import UserRegisterView from "@/views/user/account/UserRegisterView"
-
+import store from '@/store'
 
 const routes = [
   {
     path: "/",
     name: "home",
-    redirect: "/pk/"
+    redirect: "/pk/",
+    meta: {
+      requestAuth: true,
+    },
   },
   {
     path: "/pk/",
     name: "pk_index",
     component: PkIndexView,
+    meta: {
+      requestAuth: true,
+    },
   },
   {
     path: "/record/",
     name: "record_index",
     component: RecordIndexView,
+    meta: {
+      requestAuth: true,
+    },
   },
   {
     path: "/ranklist/",
     name: "ranklist_index",
     component: RanklistIndexView,
+    meta: {
+      requestAuth: true,
+    },
   },
   {
     path: "/user/bot/",
     name: "user_bot_index",
     component: UserBotIndexView,
+    meta: {
+      requestAuth: true,
+    },
   },
   {
     path: "/404/",
     name: "404",
     component: NotFound,
+    meta: {
+      requestAuth: false,
+    },
   },{
     path: "/user/account/login/",
     name: "login",
     component: UserLoginView,
+    meta: {
+      requestAuth: false,
+    },
   },
   {
     path: "/user/account/register/",
     name: "register",
     component: UserRegisterView,
+    meta: {
+      requestAuth: false,
+    },
   },
 
   {
@@ -60,4 +84,13 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to,from,next) => {
+  if (to.meta.requestAuth && !store.state.user.is_login){
+    next({name:"login"}); // 如果未登录且访问需要授权的页面，则先跳转到登陆页面
+  }
+  else {
+    next(); // 跳转到pk(home)页面
+  }
+})
+
 export default router

web/src/store/user.js

@@ -7,6 +7,7 @@ export default {
         photo: "",
         token: "",
         is_login: false, // 默认未登录状态
+        pulling_info: true, // 是否正在拉取信息
     },
     getters: {
     },
@@ -26,6 +27,9 @@ export default {
             state.photo = "";
             state.token = "";
             state.is_login = false;
+        },
+        updatePullingInfo(state,pulling_info) {
+            state.pulling_info = pulling_info;
         }
     },
     actions: { // 在actions中调用修改全局变量的函数
@@ -42,6 +46,8 @@ export default {
                     // 登陆成功
                     if(resp.error_msg === "success"){
                         // 调用updateToken函数，形参中的data为resp.token
+                        // 将登陆信息的token存入localStorage实现持久化(浏览器刷新退出登陆)
+                        localStorage.setItem("jwt_token",resp.token);
                         context.commit("updateToken",resp.token);
                         data.success(resp);
                     }else {
@@ -78,6 +84,8 @@ export default {
               });
         },
         logout(context) {
+            // 退出时删除localStorage保存的token
+            localStorage.removeItem("jwt_token");
             context.commit("logout"); // 退出登录
         }
     },

web/src/views/user/account/UserLoginView.vue

@@ -1,5 +1,5 @@
 <template>
-  <ContentField>
+  <ContentField v-if="!$store.state.user.pulling_info">
   <div class="row justify-content-md-center">
     <div class="col-3">
         <form @submit.prevent="login">
@@ -43,6 +43,24 @@ export default {
     let password = ref('');
     let error_msg = ref('');
 
+    // 如果localStorage中保存了token，那就读取出来并和后端信息比对，比对成功进入首页
+    const jwt_token = localStorage.getItem("jwt_token");
+    if (jwt_token) {
+      store.commit("updateToken",jwt_token);
+      store.dispatch("getInfo",{ // 向后端请求信息
+        success(){
+          router.push({name:"home"}); // 验证成功跳转到首页
+          store.commit("updatePullingInfo",false);
+        },
+        error() {
+          store.commit("updatePullingInfo",false);
+        }
+      })
+    }
+    else {
+        store.commit("updatePullingInfo",false);
+    }
+
     // 定义触发函数： 提交表单时触发login函数
     const login = () => {
       error_msg.value = "";

web/src/views/user/account/UserRegisterView.vue

@@ -1,11 +1,12 @@
 <template>
   <ContentField>
-  <div class="row justify-content-md-center">
-    <div class="col-3">
-        <form >
+    <div class="row justify-content-md-center">
+      <div class="col-3">
+        <form @submit.prevent="register">
           <div class="mb-3">
             <label for="username" class="form-label">用户名</label>
             <input
+              v-model="username"
               type="text"
               class="form-control"
               id="username"
@@ -14,40 +15,85 @@
           </div>
           <div class="mb-3">
             <label for="password" class="form-label">密码</label>
-            <input type="password" class="form-control" id="password" placeholder="请输入密码"/>
+            <input
+              v-model="password"
+              type="password"
+              class="form-control"
+              id="password"
+              placeholder="请输入密码"
+            />
           </div>
 
-        <div class="mb-3">
+          <div class="mb-3">
             <label for="confirm_password" class="form-label">确认密码</label>
-            <input type="password" class="form-control" id="confirm_password" placeholder="再次输入一次密码"/>
+            <input
+              v-model="confirm_password"
+              type="password"
+              class="form-control"
+              id="confirm_password"
+              placeholder="请再输入一次密码"
+            />
           </div>
-          <div class="error_msg">密码错误!</div>
+          <div class="error_msg">{{ error_msg }}</div>
           <button type="submit" class="btn btn-primary btn-sm">注册</button>
         </form>
+      </div>
     </div>
-  </div>
   </ContentField>
 </template>
 
 <script>
-
-import ContentField from "@/components/ContentField.vue"
-
+import ContentField from "@/components/ContentField.vue";
+import { ref } from "vue";
+import router from "@/router/index";
+import $ from 'jquery';
 
 export default {
-    components: {
-        ContentField
-    }
-}
+  components: {
+    ContentField,
+  },
+  setup() {
+    let username = ref("");
+    let password = ref("");
+    let confirm_password = ref("");
+    let error_msg = ref("");
+    const register = () => {
+      $.ajax({
+        url: "http://localhost:3000/user/account/register/",
+        type: "POST",
+        data: {
+          username: username.value,
+          password: password.value,
+          confirmedPassword: confirm_password.value,
+        },
+        success(resp) {
+          // 注册成功，跳转到登陆界面
+          if (resp.error_msg === "success") {
+            router.push({ name: "login" });
+          } else {
+            error_msg.value = resp.error_msg;
+          }
+        },
+      });
+    };
+    return {
+      username,
+      password,
+      confirm_password,
+      error_msg,
+      register,
+    };
+  },
+};
 </script>
 
 <style scoped>
 button {
   width: 100%;
 }
-.error_msg{
-    margin-bottom: 10px;
-    color: red;
-    font-weight: bold;
+.error_msg {
+  margin-bottom: 10px;
+  color: red;
+  font-weight: bold;
 }
-</style>
+</style>