9-10 增加退出登录功能，退出登录后前端 store 中的信息和后端 redis 中的信息被清除

src/main/java/io/github/yubincloud/fairywiki/controller/UserController.java

@@ -8,16 +8,21 @@ import io.github.yubincloud.fairywiki.dto.req.UserSaveReqDto;
 import io.github.yubincloud.fairywiki.dto.resp.*;
 import io.github.yubincloud.fairywiki.service.UserService;
 import io.github.yubincloud.fairywiki.utils.SnowFlake;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.data.redis.core.RedisTemplate;
 import org.springframework.util.DigestUtils;
 import org.springframework.web.bind.annotation.*;
+import org.springframework.web.client.RestTemplate;
 
 import javax.annotation.Resource;
 import javax.validation.Valid;
 import java.util.concurrent.TimeUnit;
 
+
+@Api("用户相关接口")
 @RestController
 @RequestMapping("/user")
 public class UserController {
@@ -92,4 +97,13 @@ public class UserController {
         LOG.info("key: {}, value: {}", key, object);
         return object;
     }
+
+    @ApiOperation(value = "退出登录",
+            notes = "该接口会清除掉存放于 redis 中所传入的 token")
+    @GetMapping("/logout/{userToken}")
+    public RestfulModel<Integer> logout(@PathVariable String userToken) {
+        redisTemplate.delete(userToken);
+        LOG.info("redis 中清除 token：{}", userToken);
+        return new RestfulModel<>(ErrorCode.SUCCESS, "", 0);
+    }
 }

web/src/components/the-header.vue

@@ -21,8 +21,18 @@
       <a-menu-item key="/about">
         <router-link to="/about">关于我们</router-link>
       </a-menu-item>
+      <a-popconfirm
+          title="确认退出登录?"
+          ok-text="是"
+          cancel-text="否"
+          @confirm="logout()"
+      >
+        <a class="login-menu" v-show="currUser.id">
+          <span>退出登录</span>
+        </a>
+      </a-popconfirm>
       <a class="login-menu" v-show="currUser.name">
-        <span>Welcome, {{currUser.name}}</span>
+        <span>Hello，{{currUser.name}}</span>
       </a>
       <a class="login-menu" v-show="!currUser.name" @click="showLoginModal">
         <span>登录</span>
@@ -91,12 +101,27 @@ export default defineComponent({
       });
     };
 
+    // 退出登录
+    const logout = () => {
+      console.log("退出登录开始");
+      axios.get('/user/logout/' + currUser.value.token).then((response) => {
+        const respData = response.data;
+        if (respData.code === 0) {
+          message.success("退出登录成功！");
+          store.commit("setLocalUser", {});
+        } else {
+          message.error(respData.msg);
+        }
+      });
+    };
+
     return {
       loginModalVisible,
       loginModalLoading,
       showLoginModal,
       loginUser,
       login,
+      logout,
 
       currUser,
     }
@@ -109,5 +134,6 @@ export default defineComponent({
 .login-menu {
   float: right;
   color: white;
+  padding-left: 10px;
 }
 </style>