1. 程式人生 > 實用技巧 >vue新浪微博回撥空頁面

vue新浪微博回撥空頁面

1.vue微博回撥空頁面

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

1.1 頁面路徑 components\oauth.vue

 <template> 
   <div> 
     <p>跳轉中....</p> 
   </div> 
 </template> 
 <script> 
 import { oauth_callback_post } from './axios_api/api' 
 export default { 
   mounted() { 
     this.getCode() 
   },
   methods: { 
     // 獲取微博傳過來的code,傳送給django後端進行驗證 
     getCode() { 
       // 獲取url中的code 資訊 
       // 當前url 是 http://192.168.56.100:8888/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 
         } 
       }) 
     }, 
    } 
 }
 </script>