【从零开始搭建uniapp开发框架】（七）—— 用户登录状态封装

在开发移动端程序时，记录用户的不同状态或者判断用户是否登录

部分页面不需要用户登录即可访问，而部分的页面需要用户登录后才能访问

在common文件夹下新增一个 js-login.js  文件

js-login源码：

/**
 * 用户登录状态的相关封装
 */

import base from '@/common/js-base.js';
import nav from '@/common/js-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
			uni.showModal({
				title: '需登录',
				content: '访问该页面需要账号登录?',
				success: function(e) {
					if (e.confirm == true) {
						//跳转到登录界面
						nav.reLaunch('/intake/login');	
					} else {
						nav.switchTab('/tab/index');
					}
				}
			});
			//#endif
			
			//其它平台,直接跳转登录
			//#ifdef APP-PLUS || H5
			nav.redirectTo('/intake/login');
			//#endif

		} else {
			return true;
		}
		return false;
	},
	/**
	 * @description 登录成功后把token保存到本地存储 

	 * @param {string} key 保存变量的标识
	 * @param {any} value 保存的值 
	 */
	saveValue: function(key, value) {
		uni.setStorageSync(key, value);
	},
	/**
	 * @description 从本地存储获取token数据 

	 * @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 jsLogin from './common/js-login.js'

Vue.prototype.jsLogin = jsLogin;

页面使用

onTabItemTap: function() {
	this.jsLogin.checkLogin('/tab/my');
}

页面效果