在你的Vue项目中,安装vue-wechat-auth插件: npm install vue-wechat-auth --save 在main.js文件中引入并注册vue-wechat-auth插件: import VueWechatAuth from 'vue-wechat-auth' Vue.use(VueWechatAuth, { appId: 'your_app_id', scope: 'snsapi_
新建个文件wechatAuth.js 这个文件可以不用更改 const queryString = require('qs') // 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid), // snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别...
const scope = 'snsapi_login'; // 使用微信扫码登录 const wechatAuthUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`; window.location.href = wechatAuthUrl; } } }; 配置V...
VUE_APP_WECHAT_APPID 是你的appid VUE_APP_WECHAT_AUTH_URL ="http://www.shouquan.com/auth.html" 你的访问地址 文件路径:src/plugins/wechatAuth.js,主要是先微信跳转地址拼接,获取地址参数等 路由守卫 src/permission.js 里实现了主要的逻辑。
class VueWechatAuthPlugin { install(Vue, options) { let wechatAuth = this this.setAppId(options.appid) this.scope = SCOPES[options.scope ? 1 : 0] Vue.mixin({ created() { this.$wechatAuth = wechatAuth }, }) } constructor() { ...
npminstallvue-wechat-auth 在Vue应用中使用插件: importVuefrom'vue';importVueWechatAuthfrom'vue-wechat-auth';Vue.use(VueWechatAuth, {appId:'YOUR_APP_ID',scope:'snsapi_userinfo',redirectUri:'YOUR_REDIRECT_URI'}); 在需要授权的组件中,例如一个登录组件: ...
4、hash模式下:授权后重定向的回调链接地址反复授权,需要对#/处理,获取到code 5、如果改为history模式,需要后端配合修改nginx配置,否则部署会出现404 例子在: 手机端vue项目初始化工程模板: http://47.107.67.231:8888/project-template/mobileInitProjectfeature/wechat-auth分支下面...
class VueWechatAuthPlugin { install(Vue, options) { let wechatAuth = this this.setAppId(options.appid) this.scope = SCOPES[options.scope ? 1 : 0] Vue.mixin({ created() { this.$wechatAuth = wechatAuth }, }) } constructor() { ...
WechatAuth from 'vue-wechat-auth' +import axios from 'axios' + +// 路由配置 +let router = new Router({ + routes: [ + { + path: '/', + name: 'Hello', + meta: { + auth: true // 如果此路由需要微信授权请设置为true,默认为false + } + } + ] +}) + +Vue.use(VueRouter...
vue微信网页授权,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios,开发的微信授权方案。项目地址:vue-wechat-auth 又又又一次来写微信网页授权,一年前写过的[vue 微信授权解决方案]。 参考了[vue-wechat-login],思路有些不同,本文基于进入所有页面都必须先授权的操作。