admin管理员组文章数量:1568749
登录授权流程逻辑:
页面场景:在进入页面时,有的页面需要授权才能进入访问
实现逻辑:
- 对当前路由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/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://' + '/h5-travel/' + 'oauth';
let weixinDefaultRedirectUrl = 'http://' + '/h5-travel/' + 'card-oauth';
weixin: {
appid: '',
defaultRedirectUri: weixinDefaultRedirectUri
},
vuex定义公共微信授权登录方法,进行数据的存储
mutations:{
setUserId (state, id) {
state.userId = id
setStore({ name: 'userId', content: state.userId, type: 'session' })
},
setToken (state, token) {
state.token = token
setToken(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.data
if (wrapper.code != '200') {
throw new Error(wrapper.msg)
}
const data = wrapper.data
commit('setToken', data.sessionToken)
commit('setUserId', data.userId)
resolve()
}).catch(err => {
reject(err)
})
})
},
}
微信授权回跳页:微信端:允许授权获取个人信息后,跳转前端微信授权页,前端拿到微信提供的code传给后端,后端通过code值换取网页授权access_token和openid,开发者可以通过access_token和openid拉取用户信息。
<!--
* @Description: 微信授权登录页
-->
<template>
<!-- 空页面 负责微信授权登录接口调用和重定向业务页面 -->
<div style="margin:0 auto;text-align:center;margin-top: 50%;">
<van-loading size="48px"></van-loading>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import { getReferUrl } from '@/libs/util'
import router from '@/router/index'
import { json } from 'body-parser';
export default {
name: 'TravelCardOauth',
data() {
return {
};
},
computed: {
},
mounted() {
var _this = this;
const code = _this.$route.query.code;
// 调用授权登录方法
_this['user/handleLogin']({ code }).then(
res => {
// 登录成功之后 重新跳转至原页面 或者再次执行统一的跳转方法
router.replace(getReferUrl())
//router.go(-1);
},
function (err) {
console.log('微信授权错误', JSON.stringify(err))
_this.$dialog.alert({
title: '提示',
message: err.message
}).then(() => {
_this.$router.push('/home')
});
}
);
},
methods: {
...mapActions(['user/handleLogin'])
},
};
</script>
<style lang="less" scoped></style>
本文标签: 网页
版权声明:本文标题:关于微信网页授权的用法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727641153a1123324.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论