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保存

<!-- author -->
<template>
  <div class="bg">

  </div>
</template>

<script>
import {GetQueryString}  from '../utils/mixin';
export default {

//import引入的组件需要注入到对象中才能使用
components: {
},
data() {
//这里存放数据
return {
    token: '',
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    async ReturnGetCodeUrl() {

      //let {data} = await getWxAuth({});
        this.$fetchGet('login',{})
        .then((data) => {
          console.log(data)
        //  if (data.status == 200) {
            window.location.href = data.data;

        // }
         
        })
        .catch((err)=>{
            console.log(err)

        })

      
    

     },

 
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.token = window.localStorage.getItem("user_token");
     //判断当前的url有没有token参数,如果不存在那就跳转到微信授权的url
     
     //就是前面说的ReturnGetCodeUrl方法

     console.log(GetQueryString("token"))
     if (!GetQueryString("token")) {

         this.ReturnGetCodeUrl();

     } else {

      //如果有token，如http://www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200，这里的参数就是后台重定向到前台http://www.xxxx.com/h5/author，并携带的参数。这样就可以拿到我们想要的token了

      //判断一下后台返回的状态码msg，因为可能出现微信拿不到token的情况
      console.log(1111111)

      let msg = GetQueryString("msg")

      if (msg == 200) {

        this.token = GetQueryString("token");

        //存储token到本地

        window.localStorage.setItem("user_token", this.token);

        //获取beforeLoginUrl，我们的前端页面

        let url = window.localStorage.getItem("beforeLoginUrl");

        //跳转
        console.log(url)
        this.$router.push(url);
    
        //删除本地beforeLoginUrl
        // window.localStorage.removeItem('');

        removeLocalStorage("beforeLoginUrl");

      }else{

      //msg不是200的情况，可能跳到404的错误页面

      }

     }
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
    .bg{
        width: 100%;
        background-image: url('/static/img/qd.jpg');
        height:100%;
        background-size: cover;
    }
</style>

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 同时上传服务器

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