vue h5 微信授权

1.首先在main.js 中判断是否存在token,如果没有token 而且当前页面不是author(授权页面),保存用户进入的url,跳转至授权页面,那如果本地有token,发送请求获取用户数据

router.beforeEach((to, from, next) => {
  
  //  第一次进入项目
  console.log(window.localStorage.getItem("user_token"))
  if (to.meta.requireAuth){
    let token = window.localStorage.getItem("user_token");
    let userInfo=window.localStorage.getItem("userInfo");
    console.log(to)
    if (!token && to.path != "/author") {
    window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保存用户进入的url
  
    next("/author");
    return false;
  } else if (token && !userInfo) {
    console.log(token)
          fetchGet('login',{openid:token})
        .then((data) => {
          console.log("成功")
          window.localStorage.setItem("userInfo", JSON.stringify(data.data.data)); 
              next();
        })
        .catch((err)=>{
          console.log("失败")
          window.localStorage.removeItem("user_token");
          window.location.reload()
          return false;
        })
                
    }
    next();
    }else{
      next();
    }

 });

2.进入author.vue,首先判断当前链接有没有token 如果没有,就请求后端接口,后端重定向链接回来,会带token及msg 然后截取链接中的token保存






3.截取方法 mixin.js

export const GetQueryString = name => {

 var url = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");


 var newUrl = window.location.search.substr(1).match(url);
 console.log(newUrl);

 if (newUrl != null) {

  return unescape(newUrl[2]);

 } else {

  return false;

 }

};

路由模式用history,apache vue history模式配置,在打包好dist文件加.htaccess 同时上传服务器


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
 

你可能感兴趣的:(vue,微信授权)