Vue微信登录流程

首先这里用的是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个参数

1. appid:就是我们获取的appid
2. scope:默认为snsapi_login
3. theme:二维码颜色
4. redirect_uri:回调域名，开发平台获取，当用户授权后就会跳转到这个地址
5. href:二维码的样式

4，配置路由守卫
（1）打开你的src目录下的router下的index.js（也可能是别的名字，最终就是打开路由配置文件）

（2）配置路由守卫

1. to:你跳转到的页面路由对象
2. from:跳转之前的路由对面
3. 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并跳转到首页，到这里，登录就结束了