login重构

src/views/Login.vue

@@ -87,41 +87,45 @@
   </el-row>
   <div>
     <div class="qrcode" ref="qrCodeUrl"></div>
-    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
+    <vue-qr
+      :logoSrc="imageUrl"
+      text="https://blog.csdn.net/weixin_42601136"
+      :size="200"
+    ></vue-qr>
   </div>
 </template>
 
 <script setup>
-import { ref, inject } from "vue";
+import { ref, onMounted, inject } from "vue";  
 import axios from "axios";  
 import { getQRService, getUUIDService, loginService, registerService } from "@/api/user.js";  
 import router from "@/router/index.js";  
-import VueQr from 'vue-qr'
-const isLogin = ref(true);
-if (localStorage.getItem("token") !== null) {
-  router.push("/videoList");
-}
+import VueQr from 'vue-qr'; // 确保你已经注册了这个组件 
 
-
-const globalData = inject("globalData");
-
-var uuid = "";
-//表单数据
-var loginData = ref({
+export default {
+  components: {  
+    VueQr, // 注册 VueQr 组件  
+  },
+  setup() {
+    const isLogin = ref(true);
+    const globalData = inject("globalData");
+    var uuid = "";
+    //表单数据
+    var loginData = ref({
       username: "",
       email: "lijun.lj@foxmail.com",
       password: "",
       ip:"",
-});
-const registerData = ref({
+    });l
+    const registerData = ref({
       username: "",
       email: "",
       password: "",
       repassword: "",
-});
+    });
 
-//表单校验规则
-const rules = {
+    //表单校验规则
+    const rules = {
       password: [
         { required: true, message: "请输入密码", trigger: "blur" },
         {
@@ -141,9 +145,17 @@ const rules = {
         },
       ],
       email: [{}],
-};
+    };
+    onMounted(() => {  
+      const token = localStorage.getItem("token");  
+      if (token !== null) {  
+        isLogin.value = true; // 更新登录状态  
+        router.push("/videoList"); // 跳转到视频列表页面  
+        // 你可以在这里获取 UID 并更新 uid.value  
+      }  
+    }); 
 
-const creatQrCode =async () =>{
+    const creatQrCode =async () =>{
       var qrcode = new qrcode(this.$refs.qrCodeUrl, {
         text: uuid, // 需要转换为二维码的内容
         width: 100,
@@ -154,26 +166,8 @@ const creatQrCode =async () =>{
       });
     };
 
-//登录接口调用
-const login = async () => {
-  //   let req = axios.create({
-  //     baseURL: "/api",
-  //     timeout: 5000,
-  //   });
-  //   await req
-  //     .post("/user/login", {
-  //       email: loginData.value.username,
-  //       password: loginData.value.password,
-  //     })
-  //     .then((response) => {
-  //       alert(response.data.message);
-  //       resp = response.data;
-  //       jwt = resp.data;
-  //       console.log(jwt);
-  //     })
-  //     .catch((error) => {
-  //       console.error(error);
-  //     });
+    //登录接口调用
+    const login = async () => {
       let result = await loginService(loginData);
       globalData.token = result.data;
       localStorage.setItem("token", result.data.token);
@@ -183,9 +177,8 @@ const login = async () => {
       localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间
       //token.value= result.data;
       router.push("/videoList");
-};
-
-const getUUID= async() => {
+    };
+    const getUUID= async() => {
           try {
             const response = await getUUIDService({"device":"windows"});
             uuid =response.data.toString();
@@ -197,7 +190,7 @@ const getUUID= async() => {
           }
         };
 
-const getQRStatus = async () => {
+    const getQRStatus = async () => {
       let result = await getQRService({"uuid":uuid});
       if (result.code === 0) {
         if(result.data==="0"){
@@ -217,9 +210,9 @@ const getQRStatus = async () => {
       } else {
         alert(result.message);
       }
-}
+    }
 
-const  getIpClient= async() => {
+    const  getIpClient= async() => {
           try {
             const response = await axios.get("https://ipinfo.io/json");
             loginData.value.ip =response.data.ip;
@@ -234,16 +227,19 @@ const  getIpClient= async() => {
           }
         };
 
-getIpClient();
-await getUUID();
-getQRStatus();
-setInterval("getQRStatus()","1000");//showLogin()函数名一定要带括号
-const register = async () => {
+    getIpClient();
+    await getUUID();
+    getQRStatus();
+    setInterval("getQRStatus()","1000");//showLogin()函数名一定要带括号
+    const register = async () => {
       let result = registerService(registerData.value);
       if (result.code === 0) {
         alert(result.message);
       } else {
         alert(result.message);
       }
+    };
+  },
 };
+
 </script>