【从零开始搭建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');
}

 

页面效果