背景

这次项目有一个需求是实现点击一些按钮路由跳转前验证用户是否登陆，以及一些不跳转路由的功能，按钮点击后出现模态框前验证用户是否登陆。

方案选择

路由守卫

首先我并没有选择路由守卫，因为我的需求有不进行路由跳转进行验证的地方。

但是路由守卫用来做跳转前验证肯定是个不错的选择。我贴一个博客大家可以参考其他人的路由守卫方案

https://cnblogs.com/XHappyness/p/13808413.html

自定义验证方法

我是自己写的贴合需求的验证授权方法。
1.考虑跳转路由可以使用
2.在某些不跳转路由的需要验权的可以使用

实现步骤

在 utils 下编写 judgeLogin.js

export function judgeLogin() {
    
	return new Promise((resolve, reject) => {
    
		// 还未登陆
		if (!uni.getStorageSync('user')) {
    
			// #ifdef H5
			// 重定向到H5登录页
			uni.redirectTo({
    
				url: '/pages/login/index'
			})
			reject()
			// #endif
			
			// 微信小程序未登录
			// #ifdef MP-WEIXIN
			// 登陆用的临时code
			let wxCode = null
			let loginInfo = uni.getStorageSync('wxUserLogin') || {
    }
			uni.login({
    
				provider: 'weixin',
				// 获取临时code
				success: function(wx){
    
					console.log(wx, 'wx')
					wxCode = wx.code
					// 因为code是变化的，用上一次code会登陆失败，所以每次会重新获取code并加入缓存
					loginInfo.code = wxCode
					uni.setStorageSync('wxUserLogin', loginInfo)
				},
			})
			// 若没有保存用户授权信息
			if (!uni.getStorageSync('wxUserLogin')) {
    
				wx.getUserProfile({
    
					desc: "获取你的昵称、头像、地区及性别",
					success: (res) => {
    
						console.log(res, "成功返回的用户对象")
						loginInfo = {
    
							code: wxCode,
							encryptedData: res.encryptedData,
							iv: res.iv,
							userInfo: res.userInfo
						}
						uni.setStorageSync('wxUserLogin', loginInfo)
						uni.navigateTo({
    
							url:'/pages/index/login?loginInfo=' + encodeURIComponent(JSON.stringify(uni.getStorageSync('wxUserLogin')))
						})
						return
					},
					fail: res => {
    
						//拒绝授权
						// uni.showErrorModal('您拒绝了请求');
						uni.showToast({
    
							icon: 'none',
							title: '您拒绝了请求',
							duration: 1000
						})
					}
				})
			} else {
    
				uni.navigateTo({
    
					url:'/pages/index/login?loginInfo=' + encodeURIComponent(JSON.stringify(uni.getStorageSync('wxUserLogin')))
				})
			}
			reject()
			// #endif
		}
		resolve()
	})
}
export default judgeLogin

上面是整个文件，接下来我摘出来几段看一下

首先

我想要大家在验证之后再去执行本来应该的操作，所以我把这个方法写成了promise，当然可以改成接收一个函数参数作为回调也是可以的

h5登录验证

return new Promise((resolve, reject) => {
    
	// 还未登陆
	if (!uni.getStorageSync('user')) {
    
		// #ifdef H5
		// 重定向到H5登录页
		uni.redirectTo({
    
			url: '/pages/login/index'
		})
		reject()
		// #endif

微信小程序验证

// 首先要调用 uni.login 获取授权用的code
let wxCode = null
let loginInfo = uni.getStorageSync('wxUserLogin') || {
    }
uni.login({
    
	provider: 'weixin',
	// 获取临时code
	success: function(wx){
    
		console.log(wx, 'wx')
		wxCode = wx.code
		// 因为code是变化的，用上一次code会登陆失败，所以每次会重新获取code并加入缓存
		loginInfo.code = wxCode
		uni.setStorageSync('wxUserLogin', loginInfo)
	},
})

// 因为微信获取用户信息需要用户触发按钮，而我们不希望一直让用户反复操作，所以我把用户授权的信息存在了storage中
// 若没有保存用户授权信息
if (!uni.getStorageSync('wxUserLogin')) {
    
	wx.getUserProfile({
    
		desc: "获取你的昵称、头像、地区及性别",
		success: (res) => {
    
			console.log(res, "成功返回的用户对象")
			loginInfo = {
    
				code: wxCode,
				encryptedData: res.encryptedData,
				iv: res.iv,
				userInfo: res.userInfo
			}
			uni.setStorageSync('wxUserLogin', loginInfo)
			uni.navigateTo({
    
				url:'/pages/index/login?loginInfo=' + encodeURIComponent(JSON.stringify(uni.getStorageSync('wxUserLogin')))
			})
			return
		},
		fail: res => {
    
			//拒绝授权
			// uni.showErrorModal('您拒绝了请求');
			uni.showToast({
    
				icon: 'none',
				title: '您拒绝了请求',
				duration: 1000
			})
		}
	})
}

最后用户授权成功后跳转到登录页要 resolve()

成果

登录成功后，我们测试，把storage中的user信息清掉，只留用户授权信息


这个时候直接就进到了登录页，不用用户再授权了

H5端

就直接金登录页了。
当然，如果用户已经登录了，是可以直接进到想去的页面以及弹窗的