推荐设备MORE

图标设计网站

图标设计网站

疑难问题

微信小程序如何定制_vue移动端微信授权登录插件

日期:2021-01-08
我要分享
vue移动端微信授权登录插件封装的实例       今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
const queryString = require('query-string') //应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid), (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息) const SCOPES = ['snsapi_base', '']
static makeState() { return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) setAppId(appid) { this.appid = appid set redirect_uri(redirect_uri) { this._redirect_uri = encodeURIComponent(redirect_uri) get redirect_uri() { return this._redirect_uri get state() { return localStorage.getItem("wechat_auth:state") set state(state) { localStorage.setItem("wechat_auth:state", state) get authUrl() { if (this.appid === null) { throw "appid must not be null" if (this.redirect_uri === null) { throw "redirect uri must not be null" this.state = VueWechatAuthPlugin.makeState() return `connect/oauth2/authorize appid=${this.appid} redirect_uri=${this.redirect_uri} response_type=code scope=${this.scope} state=${this.state}#wechat_redirect` returnFromWechat(redirect_uri) { let parsedUrl = queryString.parse(redirect_uri.split(' ')[1]) if (process.env.NODE_ENV === 'development') { // console.log('parsedUrl: ', parsedUrl) this.state = null this._code = parsedUrl.code } else { if (this.state === null) { throw "You did't set state" if (parsedUrl.state === this.state) { this.state = null this._code = parsedUrl.code } else { this.state = null throw `Wrong state: ${parsedUrl.state}` get code() { if (this._code === null) { throw "Not get the code from wechat server!" // console.log(this) // console.log('this._code: ' + this._code) let code = this._code this._code = null // console.log('code: ' + code) return code const vueWechatAuthPlugin = new VueWechatAuthPlugin() export default vueWechatAuthPlugin

2、main.js中导入

import wechatAuth from './plugins/wechatAuth'//微信登录插件
const queryString = require('query-string');
Vue.use(wechatAuth, {appid: XXXXXXXXX});

3、路由钩子中可以进行相关操作

router.beforeEach((to, from, next) = {
 if (store.state.loginStatus == 0) {
 //微信未授权登录跳转到授权登录页面
 let url = window.location.href;
 //解决重复登录url添加重复的code与state问题
 let parseUrl = queryString.parse(url.split(' ')[1]);
 let loginUrl;
 if (parseUrl.code parseUrl.state) {
 delete parseUrl.code;
 delete parseUrl.state;
 loginUrl = `${url.split(' ')[0]} ${queryString.stringify(parseUrl)}`;
 } else {
 loginUrl = url;
 wechatAuth.redirect_uri = loginUrl;
 store.dispatch('setLoginStatus', 1);
 window.location.href = wechatAuth.authUrl
 } else if (store.state.loginStatus == 1) {
 try {
 wechatAuth.returnFromWechat(to.fullPath);
 } catch (err) {
 store.dispatch('setLoginStatus', 0)
 next()
 store.dispatch('loginWechatAuth', wechatAuth.code).then((res) = {
 if (res.status == 1) {
 store.dispatch('setLoginStatus', 2)
 } else {
 store.dispatch('setLoginStatus', 0)
 next()
 }).catch((err) = {
 next()
 }else {
 next()

以上这篇vue移动端微信授权登录插件封装的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。