vue微博回调空页面

微博回调空页面为: http://127.0.0.1:8888/oauth/callback/
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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值