前言：
這幾天使用vue寫公眾號頁面，關于拿到OpenId的授權問題，在Hash模式下，百度了很多，都是nginx配置了頂級路由（location/），然后加上什么try_files等等的，但是，在現實中，很少直接配置頂級路由的，很多二級路由，甚至多級路由的情況下，獲取OpenId就會出現很多問題，
問題一：比如少部分IOS手機（目前只發現少數蘋果手機是這種情況），會出現白屏情況，這個的大概原因，應該就是騰訊默認（部分不）支持帶“#”號的回呼，導致回呼回來的地址不對應，然后回呼頁無法訪問就出現了白屏的情況，
問題二：假設使用History模式，還是會出現各種問題，比如在獲取jssdk的時候，出現簽名錯誤，這個問題主要是出現在IOS手機上，原因是IOS在vue-router跳轉的時候，實際上地址是沒變的，比如從“localhost/index”跳轉到“localhost/index2”，實際上IOS在index2頁面獲取的地址是index的，所以jssdk授權就會出現簽名錯誤，
解決方案：
這里只講述Hash模式下，nginx、iis等代理在頂級、多級路由情況下正確獲取微信公眾號授權，獲取到OpenId的方案，
首先，vue的配置都是正常配置，比如如下圖：
vue.config.js內的publicPath配置"./"，既不影響除錯，也不影響發布，
router的history依然是createWebHashHistory()，什么都不用變，
nginx的配置如下圖（這里只配置二級路由，多級路由是一樣的，只是location變了而已，比如：location /xx/xxx/xxxx/而已）
下面，就需要借助SSO，如果公司有的，就不用看了，如果沒有的，有興趣的可以繼續往下看，
由于前端帶#號是無法通過前端進行授權的，出現的問題上面也說過了（部分手機不支持），那么我們就需要借助服務端進行授權，
大概的思路，就是前端，把絕對地址帶到Auth介面上，然后Auth生成的state快取起來，然后生成微信的回呼地址，回呼地址填自己服務端的（WxServiceAuthorize）介面，然后微信回呼的時候會生成code和回傳原來的state，通過state取到原先快取的前端絕對地址，獲取完OpenId之后，通過url的方式再把他帶回到前端，這樣就完成了授權，
注意：Auth、WxServiceAuthorize這兩個介面都需要是回傳頁面的介面，而且還要是Get請求，否則騰訊無法請求到你的介面上，
請求地址：
在前端沒有獲取授權的時候請求這個介面，然后這個介面要生成一個重定向的地址，重定向的地址指向自己第二個微信回呼地址，然后直接重定向到這個重定向地址中，
比如，我的獲取授權地址是：www.ivw.com/webapi/Auth，然后里面要生成一個唯一的state，這個state在微信回呼的地址上回呼回來是會帶過來的，我們就要根據這個state和code，進行獲取OpenId，然后快取起來，而這個Auth，會生成一個地址：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http://www.ivw.com/webapi/WxServiceAuthorize&&response_type=code&scope=snsapi_base&state=123#wechat_redirect
這個地址回呼后就是回呼到服務端的第二個地址，然后在那里進行獲取openid等操作，
示例：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/386531.html
標籤：其他
上一篇：搭建FTP資源服務器