Vue微信登录流程
当登录页面的二维码被扫了之后,回调地址后面会携带一个code,路由守卫会拦截这个code,并通过callBack向后端请求token,然后请求成功后保存token并跳转到首页,到这里,登录就结束了。简单说,从登录跳转到首页,from就是登录页面的路由对象,to就是首页的路由对象,next如果没有值,默认为跳转到to指定的页面,(1)打开你的src目录下的router下的index.js(也可能是别
·
首先这里用的是Vue2
微信登录前端需要做的
1、去微信开放平台拿到对应的appid以及相对应的回调域名
2、使用vue-wxlogin获取二维码
3、客户扫码后,在路由守卫获取code,并发请求获取token,最后跳转页面
1,登录微信开放平台,选择网站应用,就可以看到appid
2,划到最底部,有回调域名
3,引入vue-wxlogin
(1)安装依赖
npm install vue-wxlogin --save-dev
(2)页面引入并注册
import wxlogin from "vue-wxlogin";
...
components:{
wxlogin
},
(3)指定位置使用
<wxlogin :appid="appid" scope="snsapi_login" :theme="'black'" :redirect_uri="redirect_uri" :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=='"></wxlogin>
这里主要有5个参数
- appid:就是我们获取的appid
- scope:默认为snsapi_login
- theme:二维码颜色
- redirect_uri:回调域名,开发平台获取,当用户授权后就会跳转到这个地址
- href:二维码的样式
4,配置路由守卫
(1)打开你的src目录下的router下的index.js(也可能是别的名字,最终就是打开路由配置文件)
(2)配置路由守卫
- to:你跳转到的页面路由对象
- from:跳转之前的路由对面
- next:这是一个方法,可以指定跳转的路径
简单说,从登录跳转到首页,from就是登录页面的路由对象,to就是首页的路由对象,next如果没有值,默认为跳转到to指定的页面,
next如果有值,就是更改to的跳转地址为next指定的地址
router.beforeEach((to, from, next) => {
if (to.query.code == undefined) {
const token = window.sessionStorage.getItem('X-Access-Token')
if (token) { //如果有就直接到首页咯
next();
} else {
if (to.path == '/login') { //如果是登录页面路径,就直接next()
next();
} else { //不然就跳转到登录;
next('/login');
}
}
} else {
let code = to.query.code
callBack(code).then(res => {
window.sessionStorage.setItem('X-Access-Token', res.data.token)
next('/index/mainPage');
})
}
});
path:跳转的地址
query:链接携带的参数
当登录页面的二维码被扫了之后,回调地址后面会携带一个code,路由守卫会拦截这个code,并通过callBack向后端请求token,然后请求成功后保存token并跳转到首页,到这里,登录就结束了
更多推荐
已为社区贡献7条内容
所有评论(0)