小程序登陆授权 跳转页面的解决方案（接口拦截方案） |
您所在的位置：网站首页 › qq手机统一登录没有权限 › 小程序登陆授权 跳转页面的解决方案（接口拦截方案） |
小程序登陆授权 跳转页面的解决方案（接口拦截方案）
|
顾名思义 接口拦截就是在页面中调用接口的时候 如果未登录，接口返回一个 固定状态码，小程序在响应拦截的地方做拦截处理。 通常授权方式有跳转到登陆页面 授权登陆（大部分都是这么做的） 也有部分小程序是直接在页面当中弹出授权登陆弹框来登录的 我们主要讲 跳转到登陆授权页的方式 首先你要有一个全局的拦截器 接口请求 响应拦截 在app.js 里面封装一个接口请求 函数（方法）： /** * post提交 * 调用示例 * app._post_form('xxxxxx',{},(res)=>{ }) */ _post_form(url, data, success, fail, complete, isShowNavBarLoading = true) { let _this = this; // 在当前页面显示导航条加载动画 isShowNavBarLoading || true; if (isShowNavBarLoading == true) { wx.showNavigationBarLoading(); wx.showLoading({ mask: true, title: '加载中...', }) } // 获取token let token = wx.getStorageSync('token'); wx.request({ url: 'xxxxxx', // 你的接口地址 header: { 'content-type': 'application/x-www-form-urlencoded', 'token': token || '' }, method: 'POST', data: data, // 你的请求参数 success(res) { if (res.data.code === 4000) { // 登录失效 wx.reLaunch({ url: "/xxxxxx" // 你的登陆页面地址 }); return false } else if (res.data.code !== 200 && res.data.code !== 4000) { // 全局错误提示 wx.showModal({ title: '提示', content: res.data.message, showCancel: false, success(res) { fail && fail(res); } }); return false; } success && success(res.data); // 成功回调 }, fail(res) { wx.showModal({ title: '提示', content: res.errMsg, showCancel: false, success(res) { fail && fail(res); } }); }, complete(res) { wx.hideNavigationBarLoading(); wx.hideLoading(); complete && complete(res); } }); }这时候在接口调用权限失败的时候 就可以跳转到你的登陆页面了。 在看下 登陆页面的授权登陆实现： // 微信授权登录 setUserInfo: function(e) { wx.getUserProfile({ desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { this.onLogin(res.userInfo) } }) }, // 登录 onLogin(userInfo) { const _this = this wx.login({ success: function (res) { if (res.code) { //发起网络请求 app._post_form('/api/login', { code: res.code, avatarUrl: userInfo.avatarUrl, nickName: userInfo.nickName, gender: userInfo.gender }, (res)=>{ if(res.code === 200){ // 登录成功且已经绑定 wx.setStorage({ key:"token", data:res.data }) wx.reLaunch({ url: '/pages/index/index', }) } }) } }, fail: function (res) { } }) },这时候登陆成功以后会通过setStorage 把登陆成功的token 缓存到本地 这时候在跳转回 统一的页面。 这就完成了。 还有一个需求是 我到了登陆页面以后 登陆成功以后想要跳转回 我原来打开的页面这时候在登陆成功的回调函数内 // 返回上一页 let pages = getCurrentPages(); if(pages.length > 1){ // 说明有路由栈返回上一页 wx.navigateBack({ delta: 1, }) } else { wx.reLaunch({ url: '/pages/index/index', }) }好了就到这里 有啥问题 欢迎留言沟通！！！ |
【本文地址】
今日新闻 |
推荐新闻 |