【从零开始搭建uniapp开发框架】(七)—— 用户登录状态封装
框架开源地址:https://gitee.com/yunhaotian/uniapp_mobileFrame
在开发移动端程序时,记录用户的不同状态或者判断用户是否登录
部分页面不需要用户登录即可访问,而部分的页面需要用户登录后才能访问
在common文件夹下新增一个 sju.login.js 文件
sju.login源码:
/** * 用户登录状态的相关封装 */ import base from '@/common/sju.base.js'; import nav from '@/common/sju.nav.js'; let login = { /** * @description 保存不需要登录的页面路径地址 * /intake/login 用户登录页面 * /intake/register 用户注册页面 * @param {数组} */ noLogin: ['/intake/login', '/intake/register','/tab/index'], /** * @description 判断访问的Page是否需要登录 * 如果需要登录, 则判断是否已登录,未登录则跳转到登陆界面 * @param {string} url 打开的页面 */ checkLogin: function(url) { // 保存不需要登录的页面,如果pageUrl不在数组中存在,则需要登录 let needLogin = false; for (let item of login.noLogin) { if (item == url) needLogin = false; } // 如果需要登录,并且没有登录token标识,则跳转到登陆页面 let token = login.getValue('token'); if (needLogin && base.isNull(token)) { base.logInfo("需要登录:" + url); //微信小程序,提供登录提醒 //#ifdef MP-WEIXIN login.weixinInfo() //#endif //其它平台,直接跳转登录 //#ifdef APP-PLUS || H5 nav.redirectTo('/intake/login'); //#endif } else { return true; } return false; }, /** * @description 微信小程序获取用户信息 */ weixinInfo(){ uni.getUserProfile({ desc: "用于个人中心信息展示", success: (res) => { var rawData = JSON.parse(res.rawData); login.weixinLogin(rawData.nickName,rawData.avatarUrl); }, fail: (res) => { console.info('获取失败') } }); }, /** * @description 微信小程序获取openID * @param {string} nickName 微信用户名称 * @param {string} avatarUrl 用户用户头像 */ weixinLogin(nickName,avatarUrl){ uni.login({ provider: 'weixin', scopes:'auth_user', success: function (loginRes) { // 获取临时code var code=loginRes.code; console.log(code) // 请求后台接口获取openID ajax.post('/xxx/getOpenID',{ code:code, nickname:nickName, portrait:avatarUrl },data=>{ // 把后台返回的openID保存到本地存储 login.saveValue('openID',data.openID); },true) } }); }, /** * @description 本地存储 * @param {string} key 保存变量的标识 * @param {any} value 保存的值 */ saveValue: function(key, value) { uni.setStorageSync(key, value); }, /** * @description 从本地存储获取key数据 * @param {string} key 保存变量的标识 */ getValue: function(key) { let value = uni.getStorageSync(key); return value; }, /** * @description 从本地存储清除某个key * @param {string} key 保存变量的标识 */ clearKey: function(key) { uni.removeStorageSync(key); }, /** * @description 从本地存储清除所有数据 * @param {string} key 保存变量的标识 */ clearAll: function(key) { uni.clearStorageSync(); } } export default login;
main.js引入封装类代码:
引入代码:
import sjuLogin from './common/sju.login.js' Vue.prototype.sjuLogin = sjuLogin;
页面使用
onTabItemTap: function() { this.sjuLogin.checkLogin('/tab/my'); }
页面效果