关于微信网页授权的用法

登录授权流程逻辑：
页面场景：在进入页面时，有的页面需要授权才能进入访问
实现逻辑：

对当前路由meta属性定义变量布尔值requireOauth为true表示当前页需要授权，为false表示不需要授权
通过路由前置取到meta属性判断当前用户是否需要授权登录，若未登录且要跳转的页面需要微信授权登录，就把当前要跳转的页面先进行保存，然后location跳转到授权页面，location的地中携带几个参数appid、要跳转的url、esponse_type、scope
location地址是先跳到微信，由微信跳到授权页面，当微信跳到oauth授权页面时url地址栏中会携带code参数，在授权页面中拿着这个code参数去请求授权接口，在授权页面的业务逻辑中，登录成功就跳转到原来开始保存的业务页面，就完成了登录授权的流程了。

实现业务：实现业务就是我要想访问首页index页面，这个页面需要授权权限后才可以访问，所以需要先微信授权，最后在跳回这个页面

token是授权登录成功以后，登录成功后的接口会返回token进行存储在其它业务进行使用

{path: '/index',name: 'index',meta: {requireOauth: true,requireCardAuth: false},component: () => import('@/views/index.vue')},{path: '/oauth',name: 'oauth',meta: {requireOauth: false,requireCardAuth: false},component: oauth},router.beforeEach((to, from, next) => {redirect(to, from, next)
})const redirect = (to, from, next) => {console.log(config.weixin.defaultRedirectUri);const token = getToken();const bindStatus = store.state.user.realAuthStatus;if (!token && to.meta.requireOauth) {// 未登录且要跳转的页面需要微信用户授权登录setReferUrl(to.fullPath)window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + config.weixin.appid + '&redirect_uri=' + encodeURI(config.weixin.defaultRedirectUri) + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect';} else if (token && to.meta.requireCardAuth && bindStatus == '0') {// 已登录要去社保卡授权的页面setReferUrl(to.fullPath)window.location.href = config.wecity.defaultRedirectUrl} else {// 其他情况 直接跳转next()}
}

config.js 配置location地址的id和跳转的地址，这是固定值

config.js
配置location地址的id和跳转的地址，这是固定值let weixinDefaultRedirectUri = 'http://.com' + '/h5-travel/' + 'oauth';
let weixinDefaultRedirectUrl = 'http://.com' + '/h5-travel/' + 'card-oauth';weixin: {appid: 'wx32541b8b5c0aab39',defaultRedirectUri: weixinDefaultRedirectUri},

vuex定义公共微信授权登录方法,进行数据的存储

mutations:{setUserId (state, id) {state.userId = idsetStore({ name: 'userId', content: state.userId, type: 'session' })},setToken (state, token) {state.token = tokensetToken(token)},
}actions: {/*** @description: 微信授权登录方法* @param {*} commit：上下文桥梁* @param {*} code：微信调回auth授权页面时携带的参数* @param {*} state：重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节，可要可不要*/    handleLogin ({ commit }, { code, state }) {return new Promise((resolve, reject) => {oauthcallback(code,state).then(res => {console.log(res);const wrapper = res.dataif (wrapper.code != '200') {throw new Error(wrapper.msg)}const data = wrapper.datacommit('setToken', data.sessionToken)commit('setUserId', data.userId)resolve()}).catch(err => {reject(err)})})},}

关于微信网页授权的用法相关推荐

真-小白详解-Springboot微信网页授权！！！
个人也是一个小白,记录自己开发微信网页授权的过程,其中有什么不足,欢迎各位指点!!! 开发前提: (1)Springboot的开发环境 (2)导入github的微信SDK <dependency ...
Java微信网页授权开发
1.微信网页授权access_token与普通access_token区别有效期:两者有效时间都是 7200s: 使用范围:通过网页授权获得的access_token,只能获取到对应的微信用户信息, ...
不插即用！配备微信网页授权模块的CodeIgniter应用脚手架
昨天发了一篇<即插即用!适用于CodeIgniter框架的微信网页授权模块>,今天想了想干脆整理一个脚手架好了. Github仓库: CodeIgniter-Weixin_Template ...
android user-agent iso-8859-1,微信网页授权，错误40163，ios正确，安卓错误？
2018-07-18:一年时间过去了,我又回来填自己挖的坑了!! 2017年7月,我遇到了这个问题,当时在这里提了问,后来又跟踪了两天,也没彻底搞懂,反正时好时坏,,后来自己主要精力放在H5+开发上, ...
微信遇到特殊服务器,解决微信网页授权，出现errcode:40163,errmsg:codebeenused，看似微信访问了2次这个回调接口的问题...
先说说自己理解的微信机制: 微信内访问自己服务器的页面,如果访问出错,微信就会认为是微信自身的问题,那么他就会开启另外一个IP来访问这个页面(什么上海的IP,深圳的IP不等),再把访问结果发回用户端, ...
微信网页授权，获取微信code，获取access_tocken,获取用户信息
微信开发中,经常有这样的需求:获得用户头像.绑定微信号给用户发信息.. 那么实现这些的前提就是授权! 1.配置安全回调域名: 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的" ...
ajax 微信code获取_ajax 实现微信网页授权登录的方法
项目背景因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析因为本人是一个phper ,所以,微信开发采用的是 EasyWeCha ...
微信网页开发教程 php,PHP实现微信网页授权开发教程，php授权教程_PHP教程
PHP实现微信网页授权开发教程,php授权教程微信网页授权是服务号才有的高级功能,开发者可以通过授权后获取用户的基本信息:在此之前,想要获取消息信息只能在用户和公众号交互时根据openid获取用户信 ...
微信wechat.class.php,laravel使用组件实现微信网页授权登入
laravel框架中的实现简单实现微信网页授权登入首先引入基于laravel的easywechat的组件,laravel版本5.8 $ cd laravel $ composer require & ...
微信开发---微信网页授权、JS-SDK和微信公众号的基本设置
用了好几个小时的时间,整理了一下关于公众号的思维导图,由于CSDN不能上传相对应的文件,所以萍子一一的分解开的截图附上来,希望对大家有所帮助哦~ 因为是电脑设备自动截图,又鉴于内容比较多,可能不是太清 ...

关于微信网页授权的用法

关于微信网页授权的用法相关推荐

最新文章

热门文章