前端需要做的事
-
App.vue:监听路由,如果发生变化,就去localStorage里检查token,如果没有token,即没有进行授权。同时,如果路由不是授权页面,那么需要进行跳转到授权页面进行授权。
// App.vue watch: { '$route' () { const token = localStorage.getItem('token') if (this.$route.path === '/auth' || this.$route.path === '/') { return } if (token === '' || !token) { localStorage.setItem('backPath', this.$route.path) this.$router.replace({path: `/auth`}) } } },
tips:
- 可以在第一个 if 判断里来筛选不需要授权的路由。
- 存储 backPath 是为了授权完成后返回。
-
Auth.vue:在创建时,检查url中是否有token,如果没有,将路由设置为授权链接;如果有,则把token存起来,再跳转到授权前的页面。
created() { setTimeout(()=>{ this.timeOut = true },10000) const token = getUrlKey("token") if (token) { localStorage.setItem('token', token); let backPath = localStorage.getItem('backPath') if(!backPath || backPath === '/'||backPath==='/auth'){ backPath = '/register' } this.$toast.loading({ message: '正在为您跳转...', forbidClick: true, }); setTimeout(() => { this.$router.replace({path: backPath, query: {}}) }, 618) } else { // console.log("去腾讯授权") setTimeout(() => { window.location.href = `youauthapi?state=${window.location.href}` }, 1000) } },
tips:
- 授权链接中需要把当前的url拼接到state中,授权完成才能回到授权页面。
- 可以添加一个timeout用来进行授权失败处理。
后端需要做的事
- 解析授权api传过来的请求。
youauthapi?state=${window.location.href}
- 拼接微信授权URL:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec
- 返回重定向响应,目标为拼接的微信授权URL。
用户体验
- 打开网页(app.vue)。
- 网页加载完成,发生跳转,跳转到空白页面(auth.vue),弹出loading,提示正在登录。
- 再次跳转(open.weixin.qq.com),弹出微信授权框。
- 点击授权,跳转到空白页面(auth.vue),提示正在为您跳转…。
- 跳转到最初的网页(app.vue)。