首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue开发公众号 在钩子里面处理登录获取code

vue开发公众号 在钩子里面处理登录获取code

原创
作者头像
IT工作者
发布2022-02-21 13:04:47
发布2022-02-21 13:04:47
8370
举报
文章被收录于专栏:程序技术知识程序技术知识
代码语言:javascript
复制
<br>const baseurl = "//xxx"
// 解析url参数并获取code
  function getUrlParam(name) {   //name为要获取的参数名
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var rrr = decodeURIComponent(window.location.search);
    var r = rrr.substr(1).match(reg);
    if(r != null) return unescape(r[2]);
    return null; 
  }
// 请求微信服务器获取code 方法
function getUserCode() {
    redirectURL = encodeURI((baseurl + window.location.pathname + window.location.search).split('&code')[0]);//获取地址
    const base = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=';
    let state;
    let surl;
    let reserveUrl;
    let appid = "";
    let scope = "1";
    window.location.href =base + appid +'&redirect_uri='+ redirectURL +'&response_type=code&scope='+ scope +  '#wechat_redirect';
}
   
// 路由变化时
  router.beforeEach((to, from, next) => {
    //读取sessionStorage的user
    let user = JSON.parse(sessionStorage.getItem('user'));
    //这里可以在开发生产环境下 加测试用户信息存储到sessionStorage
    if(document.domain == "127.0.0.1"){//本地环境
      sessionStorage.setItem('user', JSON.stringify({
        uid     : 'eyJhbGciOiJIUzI1NiJ9.eyJ0IjoiNjY1NDA6MTU1NzQ0ODE2MiJ9.Dt4QHKq58GOdI_j8GhK0o3SkyWwHDlfeHR0nh1nEgsw',
        identity: 1
      }));
      store.commit('updateUser', {"uid":"eyJhbGciOiJIUzI1NiJ9.eyJ0IjoiNjY1NDA6MTU1NzQ0ODE2MiJ9.Dt4QHKq58GOdI_j8GhK0o3SkyWwHDlfeHR0nh1nEgsw","user_id":66540,"identity":1,"avatar":"http://chaofenxiang.vip/data/attachment/avatar/1904/28/ef0b7277767425348af3503e0759eacd.png","nickname":"小义","sex":"女","mobile":"15070026795"});//赋值本地存储
    }
     
    // 已登录
    if (user) {
      next();//释放路由 如果已经登录
    }
 
    // 未登录 且不是在测试环境下
    if (!user && document.domain != "127.0.0.1") {
        const code = getUrlParam('code');//获取url 上面的code
        // 还未完成微信授权
        if (!code) {//假如没code
            getUserCode();//请求微信服务器获取code
        }
        // 已完成微信授权 假如已经获取到了code
        if (code) {
             //使用code 去登录
            axios.get("/xxxx", {//
                params: {
                  code: code,
                }
            }).then(res => {
                if (res.status == 200) {
                  let userInfo = res.data.userInfo;
                  sessionStorage.setItem('user', JSON.stringify(userInfo));// 存sessionStorage<br>                     next();
                } else {
                   
                }
            }).catch(err => {
                //登录失败,请刷新重试
            });
        }
    }else{
      next();
    }
  });
   
 
//ps 代码放在main.js 里面仅供参考<br>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档