H5页面微信授权登录—

作为一枚刚刚学习前端的小萌新来说，真的是难到了我，后来翻阅无数资料，总结如下，记录下来防止自己忘了，也为其他的刚学习的朋友一点提示吧。

首先说路由导航，把所有的访问地址先拦下来进行判断，新来的用户是否有授权，如果没有就引导入授权页，这里我的授权页是login.vue，这里的getUid() 是axios请求获取用户的openId,如果用户有，则认为有授权，直接放行，用户没有就认为没有授权，如果用户访问的是/login，直接放行，如果不是，强制定向访问/login

// 路由导航
router.beforeEach((to, from, next) => {
var uid = getUid() // 获取uid
if (!uid) {
if (to.path === '/login') {
next()
} else {
next('/login')
}
} else {
next()
}
})

login页面我结合了vant模板来做，

// login.vue页面

<van-loading size="24px" vertical type="spinner" color="#1989fa">登录中...</van-loading>

</div>

</template>

export default {

data() {

return {

openId: ‘’,

userId: ''

}

created() {

this.getloginInfo()

methods: {

async getloginInfo() {

const AppId = '你自己的公众号的AppId' // 公众号的AppId

const code = getUrlParam('code') // 获取请求路径中带code字段参数的方法

const local = window.location.href // 获取当前的页面路径，这就是回调的地址

if (code == null || code === ' ') {

window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + AppId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'

} else {

this.getOpenId(code) // 通过获取到的code，调用后台的接口，取得openId

}

// 获取页面路径的code参数

getUrlParam(name) { // 获取URL指定参数

var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 构造一个含有目标参数的正则表达式对象

var r = window.location.search.substr(1).match(reg) // 匹配目标参数

if (r != null) return unescape(r[2])

/ return null // 返回参数值

// 把code传给后台

async getOpenId(code) { // 通过code获取openId等用户信息

const res = await this.$http({

url: '后台会给你一个链接地址的',

method: 'POST',

params: {

code: code // 根据后台要求的参数填写

}

// })

// console.log(res.data)

// }

}

</script>

.login {

font-size: 0.32rem;

text-align: center;

margin-top: 5rem;

}

</style>

H5页面微信授权登录——前端部分相关推荐

移动端h5页面微信一键登录
在移动端的 H5 页面中,微信一键登录是一种常见的方式,可以方便地让用户使用已有的微信账号进行登录,并且提高用户的使用效率和体验.具体实现方法如下: 1.在页面中引入微信 JS-SDK,并初始化 ht ...
【H5微信授权】简单实现H5页面微信授权功能，微信开发者工具报错系统错误，错误码-1，undefined解决办法【详细】
前言最近写到了H5公众号,需要微信授权的功能. 这里记录一下授权的流程和踩了个坑图片授权代码执行后会跳转到授权的地方,没有授权的会有确认授权,授权过得会这样,直接自动登录,然后再跳转到中转页授 ...
H5页面微信自动登录，和微信页面自定义分享样式
#1.首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名. 备注:登录后可在"开发者中心"查看对应的接口权限. 2 ...
h5获取微信授权登录
1.判断是否有code---没有跳转到微信官方网址网址中的参数参考微信公众平台官网----网页授权 | 微信开放文档 (qq.com) getCode() { //微信网页授权返回codelet ...
公众号平台的H5实现微信授权登录
微信给开发者提供的测试账号平台:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/ind ...
H5 微信授权登录功能实现
背景最近几周面试复习以前知识库,刚好博客从国外迁移到国内CSND,同步坐下笔记,梳理之前开发H5 微信授权登录功能获取用户信息数据. H5页面微信授权登录,使用微信官方JSSDK,微信网页授权较为复 ...
uniapp - 超详细的 H5 公众号网页微信登录示例代码，提供从 0-1 公众号配置及详细注释代码（站在新手小白的角度）第三方微信授权登录的实现！！
介绍目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...
微信授权登录-微信公众号和PC端网站
一.微信公众号授权登录--微信公众平台微信授权登录,并调用后台接口,获取用户信息 1.网页授权回调域名首先要在公众平台官网中的"开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授 ...
浏览器打开微信公众号h5页面，增加cookie绕过微信授权登录
from selenium import webdriver from time import sleepdriver = webdriver.Chrome() #插入cookie需要与cookie相 ...

H5页面微信授权登录——前端部分

H5页面微信授权登录——前端部分相关推荐

最新文章

热门文章