微信授权签到实践

页面鉴权

获取code==>获取token==>请求头设置token

换取微信code
引入wx的jsdk

 <script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

从微信拿到code换token

<script>
import {getToken} from './services/index';

export default {
  methods: {
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = decodeURI(window.location.search.substr(1)).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    init() {
      const code = this.GetQueryString('code');
      const token = localStorage.getItem('token')
      if (!token) {
        localStorage.clear();
        if (code) {
          this.fetchToken(code)
        } else {
          this.fetchCode()
        }
      } else {
        this.$store.commit('setToken', token)
      }
    },
    async fetchToken(code) {
      const {status, data} = await getToken({code})
      if (status === 200) {
        this.$store.commit('setToken', data.token)
        localStorage.setItem('token', data.token)
        this.token = data.token;
        this.init()
      } else {
        this.fetchCode()
      }
    },
    async fetchCode() {
      const host = location.origin+'/customer/#'+this.$route.path;
      location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(host)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    },
  }
}
</script>

axios设置请求拦截器(过滤不需要token的请求)

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    console.log(config)
    const {url} = config;
    const list = ['/api/token', '/api/OAuth2', '/api/OAuth2/JsConfig']
    if(list.indexOf(url)<0) {
      config.headers['type'] = 'jwt'
      config.headers['Authorization'] = 'Bearer '+localStorage.getItem('token')
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);