1.vue微博回撥空頁面

注：微博回撥空頁面為：http://127.0.0.1:8888/oauth/callback/

1.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
				}
			})
		}
	},
	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>