# 微信小程序登錄 > 微信小程序登錄的用法, 在這里我使用的token驗證, 登錄成功后存入token 以后每個請求都帶token > `this.$http` 這個對象是在`main.js`綁定的`request.js` 替代uni.request 因為有攔截器好處理自動帶token請求 > [request.js](request.md) #### Code ```vue <template> <view> <view class="top"> <image class="poster" :src="userInfo.avatar" @tap="toAvatar()"></image> <view class="name">{{userInfo.nick_name}}</view> <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onLogin">獲取用戶信息</button> </view> </view> </template> <script> export default { data() { return { userInfo: { avatar: '../../static/images/avatar.png', nick_name: '游客' } } }, onLoad() { this.getUserInfo(); }, onShow() { // 避免緩存問題 this.getUserInfo(); }, methods: { // 查詢用戶信息接口 getUserInfo() { this.$http.get("api/user/get_info").then(({data})=>{ if (data.code==0) { this.userInfo.avatar = data.data.avatar; this.userInfo.nick_name = data.data.nickname; } else { this.userInfo.avatar = "../../static/images/avatar.png"; this.userInfo.nick_name = "游客"; } }).catch(()=>{ uni.showToast({ title:"查詢用戶信息失敗", icon:"none" }) }) }, // 登錄 onLogin(res) { let that = this; // 不同意授權 if (!res.detail.iv) { return false; } // 1.wx獲取登錄用戶code uni.login({ provider: 'weixin', success: function(loginRes) { let code = loginRes.code; // 2.查詢用戶信息 that.$http.get("api/login/wx_login", {code: code}).then(({data}) => { console.log("userInfo", data); if (data.code===0) { // 老顧客了 that.$userId = data.data.uid; // uid that.$http.config.token = data.data.token; // token that.getUserInfo(); // 查詢用戶信息 } else if (data.code === 200) { // 首次登錄 -- 綁定手機/注冊 uni.setStorageSync("wxTempInfo", data.data); uni.navigateTo({ url:"bindPhone/bindPhone" }) } else { uni.showToast({ title:data.msg||"查詢失敗", icon:"none" }) } }).catch(() => {}) } }); } } } </script> ```