Vue微信项目按需授权登录策略实践思路详解

Vue微信项目按需授权登录策略实践思路详解

项目采用vue作为开发框架，用户浏览页面时有两种情况：

一种是需要用户先登录之后才能继续浏览；

另一种是用户无需登录即可随意浏览。

在无需用户登录的页面中，可能包含需要用户信息的操作，此时就需要用户登录之后方能进行后续操作。因此，需要对授权登录策略进行区分。

思路

1.一般而言，我们为微信开发的H5页面，进入页面的时候就进行鉴权，要求用户登录之后才能继续浏览。但由于产品需求，这个项目我们需要对不同页面的鉴权策略进行划分，按照一般与特殊进行设计：

2.一般情况，用户进入页面第一时间要求用户授权登录，按照常规的微信授权登录流程，登录之后，用户继续浏览。

3.特殊情况，为无需用户登录的页面配置白名单，只要进入存在于白名单的路由，不进入检测用户登录状态的函数，直接渲染页面。

对于用户未登录状态下进行的需要用户信息的操作，按照我目前的理解，即使是基于微信的静默授权，页面也必须重新刷新，无法做到真正无感授权并且继续用户的操作。因此我选择在前端层面给用户更友好的提示，让用户了解授权过程，缺点是前一次操作仅仅是vFSdgrB触发授权登陆，授权登录后，用户需要再次进行操作。

// routerRule.js

export default function routerRule (router, whitehttp://List = []) {

// 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，就进行微信授权。这种做法开发过程比较方便，但是会在用户未登录情况下发送了一些不必要的请求给后端，感觉不太好。

总结

以上所述是给大家介绍的Vue微信项目按需授权登录策略实践思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。