這次帶給大家Vue微信專案按需授權登入實戰案例詳解，實現Vue微信專案按需授權登入的注意事項有哪些，以下就是實戰案例，一起來看一下。
專案採用Vue作為開發框架，使用者瀏覽頁面時有兩種情況：
#一種是需要使用者先登入之後才能繼續瀏覽；
另一種是用戶無需登入即可隨意瀏覽。
在無需使用者登入的頁面中，可能包含需要使用者資訊的操作，此時就需要使用者登入之後方能進行後續操作。因此，需要對授權登入策略進行區分。
思路
1.一般而言，我們為微信開發的H5頁面，進入頁面的時候就進行鑑權，要求用戶登入之後才能繼續瀏覽。但由於產品需求，這個項目我們需要對不同頁面的鑑權策略進行劃分，按照一般與特殊進行設計：
2.一般情況，用戶進入頁面第一時間要求用戶授權登錄，按照常規的微信授權登入流程，登入之後，使用者繼續瀏覽。
3.特殊情況，為無需使用者登入的頁面配置白名單，只要進入存在於白名單的路由，不進入偵測使用者登入狀態的函數，直接渲染頁面。
對於用戶未登入狀態下進行的需要用戶資訊的操作，按照我目前的理解，即使是基於微信的靜默授權，頁面也必須重新刷新，無法做到真正無感授權並且繼續用戶的操作。因此我選擇在前端層面給予使用者更友善的提示，讓使用者了解授權過程，缺點是前一次操作只是觸發授權登陸，授權登入後，使用者需要再次進行操作。
// routerRule.js
export default function routerRule (router, whiteList = []) {
// other codes...
router.beforeEach( (to, from, next ) => {
// 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
new Promise((resolve, rejects) => {
if ( whiteListRouter.indexOf(to.path) !== -1 ) {
resolve()
return
}
// 常规页面授权登录过程
if (hasToken()) {
// codes，获取用户信息并且跳转所需跳转的页面
} else {
// 判断用户是否已经进行微信授权
if (hasAuthed()) {
// 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
getWechatUserInfo().then(res => {
resolve()
})
} else {
// 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
getWechatAuth()
}
}
}).then( res => {
next()
})
})
router.afterEach(( to, from ) => {
wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo})
})
}本項目是在用戶初次進行微信綁定時，就將用戶的微信資訊與本站的用戶資訊進行的綁定，因此在獲取用戶微信授權資訊後，就可以獲取到用戶的token，從而獲取用戶在本站的其他用戶資訊。
在無需登入頁面的進行需要權限的操作的處理
#根據上面的邏輯，進入白名單之後，整個函數已經被return掉，不會進入下面的鑑權過程。但是如果是在此種頁面上進行需要權限的操作，那麼就需要觸發授權登入流程，並且在授權之後，要一併獲取使用者資訊。
// checkLogin.js
export function checkLogin({ redirectUrl, wxAuthLoading, wxAuthLoaded, callback } = {}) {
if (getToken()) {
// ...
callback && callback()
} else {
// 提示用户正在授权中
wxAuthLoading && wxAuthLoading()
getWechatAuth( redirectUrl || window.location.href ).then( res => {
// 授权完毕，提示用户授权成功
wxAuthLoaded && wxAuthLoaded()
})
}
}同時，我們需要對路由白名單添加一些操作
// routerRule.js
export default function routerRule (router, whiteList = []) {
// other codes...
router.beforeEach( (to, from, next ) => {
// 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
new Promise((resolve, rejects) => {
if ( whiteListRouter.indexOf(to.path) !== -1 ) {
// 如果已经进行微信授权但是没有token值的，就调用以下函数获取token值
if ( !hasToken() && hasAuthed() ) {
getWechatUserInfo().then(res => {
resolve()
})
}
resolve()
return
}
// 常规页面授权登录过程
if (hasToken()) {
// codes，获取用户信息并且跳转所需跳转的页面
} else {
// 判断用户是否已经进行微信授权
if (hasAuthed()) {
// 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
getWechatUserInfo().then(res => {
resolve()
})
} else {
// 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
getWechatAuth()
}
}
}).then( res => {
next()
})
})
// other codes...
}#坑點以及不完善的地方
1.這個方案在用戶授權之後，在路由跳轉之前，一定要先獲取用戶信息，否則在url上的微信授權信息就會丟失，獲取用戶信息就會失敗。
2.這個方案的缺點在於，需要開發者對在免登陸頁面的所有需權限操作都加上checkLogin判斷。由於這種需權限的操作通常都是發送非同步請求，所以如果不考慮減少不必要的非同步請求的情況下，可以統一在請求的方法上設定攔截器，判斷後端回傳的code，如果傳回的是使用者未登入的code，就進行微信授權。這種做法開發過程比較方便，但是會在使用者未登入情況下發送了一些不必要的請求給後端，感覺不太好。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Vue微信專案按需授權登入實戰案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
