08.微博繫結使用者頁面
阿新 • • 發佈:2020-10-10
目錄
微博回撥空頁面
1.頁面路徑components/oauth.vue
<template> <div> <div v-show="visiable"> 繫結使用者 使用者名稱: <input type="text" v-model="username" @blur="check_username" /> <span>{{ username_message }}</span> 密碼: <input type="password" v-model="password" /> <button @click="bindUser">繫結</button> </div> </div> </template> <script> import { oauth_callback_post, oauth_binduser_post, user_count, } from "./axios_api/api"; export default { data() { return { visiable: false, // 繫結使用者視窗 uid: "", // weibo_uid username: "", password: "", username_message: "", username_error: false, }; }, mounted() { this.getCode(); }, methods: { // 判斷使用者名稱 check_username() { console.log("判斷使用者名稱"); console.log(this.username == ""); var reg = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/); //字串正則表示式 4到14位(字母,數字,下劃線,減號) if (this.username == "") { this.username_message = "使用者名稱不能為空"; this.username_error = true; return false; } if (!reg.test(this.username)) { this.username_message = "使用者名稱格式不正確"; this.username_error = true; return false; } else { // 去後端檢查使用者名稱使用數量 user_count({ type: "username", data: this.username }).then((res) => { console.log(res); if (res.data.count > 0) { this.username_message = "使用者名稱已存在, 請輸入密碼"; this.username_error = false; } else { this.username_message = "使用者名稱可用, 將建立新使用者,請輸入密碼"; this.username_error = false; } }); } }, // 獲取微博返回的code getCode() { // 獲取url中的code 資訊 // 當前url 是 http://mysyl.com:8080/oauth/callback/? code = fe6cbe07708aecf4a2b3d942ed692c4c; let code = this.$route.query.code; console.log(this.$route.query); // 給後端傳送code let params = { code: code }; oauth_callback_post(params).then((resp) => { console.log(resp); // code: 0 // msg: "授權成功" // data: {type: "1", uid: "7410919278"} if (resp.data.type == "0") { // code: 0 // msg: "登入成功" // data: { // authenticated: "true" // email: "" // id: 1 // name: "admin" // role: null // token: // "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiw // iZXhwIjoxNTk3OTAwNTcyLCJlbWFpbCI6IiIsIm9yaWdfaWF0IjoxNTk3ODE0MTcyfQ.aQT7GSR_xQBPM // lB4_k8-zTHnx0ow3OC2KHa3C8MgilY" // type: "0" // username: "admin"} let res = resp.data; localStorage.setItem("username", res.username); // localStorage.setItem('img', res.img) localStorage.setItem("token", res.token); localStorage.setItem("uid", res.id); this.login_username = res.username; this.opened = false; // alert(res.message) this.$router.push("/"); } if (resp.data.type == "1") { this.visiable = true; this.uid = resp.data.uid; } }); }, // 繫結使用者方法 bindUser() { if (this.username_error) { return; } // 傳送 使用者名稱, 密碼, weibo_uid 到後端介面, 進行繫結 let params = { username: this.username, password: this.password, weibo_uid: this.uid, }; oauth_binduser_post(params).then((resp) => { console.log(resp); let res = resp.data; localStorage.setItem("username", res.username); // localStorage.setItem('img', res.img) localStorage.setItem("token", res.token); localStorage.setItem("uid", res.id); this.login_username = res.username; this.opened = false; // alert(res.message) this.$router.push("/"); }); }, }, }; </script>