vue 微信二維碼掃碼登入
阿新 • • 發佈:2021-06-18
大概流程:
先安裝 微信 的登入, 然後 區域性引入,區域性註冊,方法呼叫,存 token,跳轉路由
npm 安裝
npm install vue-wxlogin --save-dev
微信安裝 微信登入,後面需要用到
要掃碼登入的頁面
importwxloginfrom'vue-wxlogin'; // 先引入,後註冊
components:{
wxlogin
},
template 部分
<wxloginappid=" 微信首頁內找 appid ":scope="'snsapi_login'":theme="'black'":redirect_uri='encodeURIComponent( " 登入後跳轉的地址,讓後端配置一個地址,用於跳轉 " )'rel="externalnofollow"></wxlogin>
// 註釋: 地址 和 appid 繫結在一起的,也就是和 域名繫結在一起的。
掃碼跳轉登入之後,在 新的頁面 內 去獲取 路由地址
data:{
redirect:undefined //用來獲取地址,用於重新向跳轉
}
created(){
this.code=this.$route.query.code;
},
watch:{
$route:{
handler:function(route){
this.redirect=route.query&&route.query.redirect;
}
}
}
methods:{
引入後端方法名字(){
後端方法( 傳參 )。then(res=>{
掃碼成功,存 token。根據專案決定 存 cookie 或者其他地方
this.$router.push({path:this.redirect||"/"}); // 重定向跳轉路由
})
}
}