Vue3 登录页面 - 使用图形验证码和本地存储Token

<p>&quot;<script>\nimport axios from 'axios';\nimport Vcode from &quot;vue3-puzzle-vcode&quot;;\nimport { ref } from 'vue';\n\nexport default {\n  name: &quot;loginPage&quot;,\n  data() {\n    return {\n      username: '',\n      password: '',\n      errorMsg: '',\n      isShow: false,\n    };\n  },\n  methods: {\n    login() {\n      // 阻止默认提交事件\n      e.preventDefault();\n\n      // 图形验证码\n      const onSuccess = () =&gt; {\n        this.isShow = false; // 验证成功，关闭模态框\n        this.sendLoginRequest();\n      };\n\n      if (onSuccess == true) {\n        // 发送post请求\n        axios.post(<code>http://nn.nnCoding.icu:8080/api/login</code>, {\n          username: this.username,\n          password: this.password\n        }).then(result =&gt; {\n          // 登录成功，将token存储在本地\n          localStorage.setItem('token', result.data.token);\n          this.$router.push(&quot;/home&quot;);\n          console.log(result);\n        }).catch(error =&gt; {\n          this.errorMsg = &quot;用户名或密码错误&quot;;\n          console.log(error);\n          console.log(error.response.data.message);\n        });\n      }\n    },\n    sendLoginRequest() {\n      axios.post(<code>http://nn.nnCoding.icu:8080/api/login</code>, {\n        username: this.username,\n        password: this.password\n      }).then(result =&gt; {\n        // 登录成功，将token存储在本地\n        localStorage.setItem('token', result.data.token);\n        this.$router.push(&quot;/home&quot;);\n        console.log(result);\n      }).catch(error =&gt; {\n        this.errorMsg = &quot;用户名或密码错误&quot;;\n        console.log(error);\n        console.log(error.response.data.message);\n      });\n    }\n  }\n}\n</script>\n\n<template>\n  &lt;div id=&quot;cloud&quot;&gt;&lt;span class=&quot;shadow&quot;&gt;</span></div>\n  &lt;div id=&quot;cloud1&quot;&gt;&lt;span class=&quot;shadow&quot;&gt;</span></div>\n  &lt;div id=&quot;cloud2&quot;&gt;&lt;span class=&quot;shadow&quot;&gt;</span></div>\n  &lt;div class=&quot;login-page&quot;&gt;\n    &lt;div v-show=&quot;show&quot; class=&quot;login-container&quot;&gt;\n      &lt;h2 class=&quot;login-title&quot;&gt;登录</h2>\n      &lt;el-form class=&quot;login-form&quot;&gt;\n        &lt;el-form-item label=&quot;账号:&quot;&gt;\n          &lt;el-input v-model=&quot;username&quot; type=&quot;text&quot; style=&quot;width: 250px;&quot; placeholder=&quot;用户名或手机号登录&quot;&gt;</el-input>\n        </el-form-item>\n        &lt;el-form-item label=&quot;密码:&quot;&gt;\n          &lt;el-input v-model=&quot;password&quot; type=&quot;password&quot; style=&quot;width:250px&quot; show-password /&gt; </el-form-item>\n        <el-form-item>\n          &lt;Vcode :show=&quot;isShow&quot; @success=&quot;onSuccess&quot; /&gt;\n          &lt;el-button class=&quot;login-button&quot; type=&quot;primary&quot; @click=&quot;login&quot;&gt;登录</el-button>\n        </el-form-item>\n      </el-form>\n      &lt;div class=&quot;error-msg&quot; v-if=&quot;errorMsg&quot;&gt;{{ errorMsg }}</div>\n      &lt;div class=&quot;register-link&quot;&gt;\n        &lt;router-link to=&quot;/register&quot;&gt;\n          &lt;el-button type=&quot;info&quot; style=&quot;width: 100%;&quot;&gt;注册</el-button>\n        </router-link>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.login-page {\n  background: -webkit-linear-gradient(skyblue, pink);\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.login-container {\n  background-color: #fff;\n  padding: 30px;\n  border-radius: 10px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n}\n\n.login-title {\n  text-align: center;\n  margin-bottom: 20px;\n  font-size: 24px;\n}\n\n.login-form {\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n.login-button {\n  width: 100%;\n}\n\n.register-link {\n  margin-top: 20px;\n  text-align: center;\n}\n\n.error-msg {\n  color: red;\n  margin-top: 10px;\n  text-align: center;\n}\n</style>\n&lt;style src=&quot;../../styles/dark/cloud_login.css&quot; /&gt;</p>