uniCloud -- uniIdRouter自动路由

2024-02-03 13:20
文章标签 路由 自动 unicloud uniidrouter

本文主要是介绍uniCloud -- uniIdRouter自动路由，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

自动路由

云对象响应触发needLogin

获取当前用户信息getCurrentUserInfo

实战应用

个人中心页面 

pages.json配置  uni-id自动路由

uni_modules\uni-id-pages/common 登录页面store修改

自动路由

支持的HBuilderX版本

uni-appuni-app x
3.5.0+3.99+

uniIdRouter 是一个运行在前端的、对前端页面访问权限路由进行控制的方案。

大多数应用，都会指定某些页面需要登录才能访问。以往开发者需要写不少代码。

现在，只需在项目的pages.json内配置登录页路径、需要登录才能访问的页面等信息，uni-app框架的路由跳转，会自动在需要登录且客户端登录状态过期或未登录时跳转到登录页面。

结合以下代码及注释了解如何使用uniIdRouter

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"},"needLogin": false // 当前页面是否需要登录才可以访问，此配置优先级高于uniIdRouter下的needLogin}, {"path": "pages/list/list","style": {"navigationBarTitleText": "uni-app"},"needLogin": true}, {"path": "pages/detail/detail","style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {"loginPage": "pages/index/index", // 登录页面路径"needLogin": ["pages/detail/.*" // 需要登录才可访问的页面列表，可以使用正则语法],"resToLogin": true // 自动解析云对象及clientDB的错误码，如果是客户端token不正确或token过期则自动跳转配置的登录页面，配置为false则关闭此行为，默认true}
}

以上代码，指定了登录页为首页index，然后将list页面和detail目录下的所有页面，设为需要登录才能访问。那么访问list页面和detail目录下的页面时，如果客户端未登录或登录状态过期（也就是uni_id_token失效），那么会自动跳转到index页面来登录。

与此功能对应的有两个uniCloud客户端api，uniCloud.onNeedLogin()和uniCloud.offNeedLogin()，开发者在监听onNeedLogin事件后，框架就不再自动跳转到登录页面，而是由开发者在onNeedLogin事件内自行处理。详情参考：uniCloud.onNeedLogin

自动跳转到登录页面时会携带uniIdRedirectUrl参数，其值为encodeURIComponent(${跳转前的页面（包含路径和参数的完整页面地址）})，如果希望用户登录后跳转回之前的页面，可以使用此参数实现。

以下为登录页面跳转到之前访问页面的简单示例：

pages/login/login.vue

<template><view><button @click="login">login</button></view>
</template><script>export default {data() {return {uniIdRedirectUrl: ''}},onLoad(options) {this.uniIdRedirectUrl = decodeURIComponent(options.uniIdRedirectUrl)},methods: {async login() {// ...执行登录操作，在成功回调里跳转页面if (this.uniIdRedirectUrl) {uni.redirectTo({url: this.uniIdRedirectUrl})}}}}
</script>

云对象响应触发needLogin

云对象抛出uni-id token过期或token无效错误码时，会触发客户端自动跳转配置的登录页面，以下代码为一个简单示例

// todo云对象
const uniIdCommon = require('uni-id-common')
module.exports = {_before(){this.uniIdCommon = uniIdCommon.createInstance({clientInfo: this.getClientInfo()})},addTodo(title) {const {errCode,errMsg,uid} = await this.uniIdCommon.checkToken(this.getUniIdToken())if(errCode) { // uni-id-common的checkToken接口可能返回`uni-id-token-expired`、`uni-id-check-token-failed`错误码，二者均会触发客户端跳转登陆页面return {errCode,errMsg}}// ...}
}

客户端add-todo.vue

<template><!-- 略 -->
</template>
<script>export default {data() {return {}},onLoad() {},methods: {async addTodo(title){const todo = uniCloud.importObject('todo')await todo.addTodo(title) // 调用addTodo时云端checkToken如果返回了token错误、token失效的错误码就会自动跳转到配置的登录页面}}}
</script>
<style>
</style>

注意

  • pages.json内有uniIdRouter节点上述逻辑才会生效，自HBuilderX 3.5.0起创建空项目模板会自动配置空的uniIdRouter节点
  • uniIdRouter底层使用navigateTo、redirectTo、reLaunch、switchTab的拦截器进行页面跳转拦截，不会拦截进入首页，web端和app端会拦截原生tabbar点击，其他端不会拦截原生tabbar点击。 一般tabbar页面都不做自动跳转，而是在页面内再提供登录按钮。比如tabbar上有购物车或个人中心，点击购物车后在购物车页面内部会放一个提示语和按钮，告知用户需要登录。 在页面内判断用户是否登录，使用APIuniCloud.getCurrentUserInfo()

获取当前用户信息getCurrentUserInfo

HBuilderX 3.1.0+

解析客户端token获取用户信息。常用于在前端判断当前登录的用户状态和用户权限，比如根据不同的权限显示隐藏某些按钮。

注意

  • 此接口不会发送网络请求，此接口仅仅是客户端接口，不校验token的合法性以及是否过期
  • 需要搭配uni-id使用并要求客户端必须将token存储在storage内的uni_id_token内
  • 如需获取role、permission需要将角色权限缓存在token内，此功能自uni-id 3.0.0 或 uni-id-common中默认开启

用法：uniCloud.getCurrentUserInfo()

该方法为同步方法。

响应参数

字段类型说明
uidNumber当前用户uid
roleArray用户角色列表。admin用户返回["admin"]
permissionArray用户权限列表。注意admin角色此数组为空
tokenExpiredNumbertoken过期时间

未能获取用户信息时返回以下结果

{uid: null,role: [],permission: [],tokenExpired: 0
}

示例
 


console.log(uniCloud.getCurrentUserInfo().role.indexOf('admin')>-1); // 如果是admin用户的话，打印结果为true

实战应用

个人中心页面 

page/self/self

<template><view class="user"><view class="top"><view class="group" @click="toUserInfo"><view class="userinfo"><view class="pic"><image v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image><image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image></view><view class="text" v-if="hasLogin"><view class="nickname">{{ userInfo.nickname || userInfo.username || userInfo.mobile }}</view><view class="year"><uni-dateformat :date="new Date() - 360000" :threshold="[3600, 99 * 365 * 24 * 60 * 60 * 1000]"></uni-dateformat>注册</view></view><view class="text" v-else><view class="nickname">点击登录</view></view></view><view class="more"><text class="iconfont icon-a-10-you"></text></view></view><view class="bg"><image v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image><image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image></view></view><view class="main"><view class="info"><view class="item"><text>33</text>获赞</view><view class="item"><text>11</text>评论</view><view class="item"><text>5</text>发文</view></view><view class="list"><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-24-bianji"></text><text class="text">我的长文</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-106-xihuan"></text><text class="text">我的点赞</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-21-xiugai"></text><text class="text">评论过的</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view><view class="group"><view class="item"><view class="left"><text class="iconfont icon-a-32-wenjian"></text><text class="text">关于</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view><view class="item"><view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view><view class="group"><view class="item" @click="logout"><view class="left"><text class="iconfont icon-a-73-tuichu"></text><text class="text">退出登录</text></view><view class="right"><text class="iconfont icon-a-10-you"></text></view></view></view></view></view></view>
</template><script>
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js';
export default {data() {return {};},computed: {// 用户信息userInfo() {return store.userInfo;},// 是否登录hasLogin() {return store.hasLogin;}},methods: {//编辑个人资料toUserInfo() {uni.navigateTo({url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'});},// 是否登录goLoginPage() {if (!this.hasLogin) {uni.showToast({title: '未登录',icon: 'none'});return true;}return false;},//退出登录logout() {if (this.goLoginPage()) return;uni.showModal({title: '是否确认退出?',success: (res) => {console.log(res);if (res.confirm) {mutations.logout();}}});}}
};
</script><style lang="scss">
.user {.top {height: 300rpx;background: #bbb;padding: 0 30rpx;padding-top: var(--status-bar-height);position: relative;display: flex;align-items: center;.group {position: relative;z-index: 10;display: flex;align-items: center;justify-content: space-between;width: 100%;color: #fff;.userinfo {display: flex;width: 100%;align-items: center;.pic {width: 120rpx;height: 120rpx;border-radius: 50%;overflow: hidden;border: 2px solid #fff;image {width: 100%;height: 100%;}}.text {padding-left: 20rpx;.nickname {font-size: 44rpx;font-weight: 600;}.year {font-size: 26rpx;opacity: 0.6;padding-top: 5rpx;}}}.more {.iconfont {font-size: 40rpx;}}}.bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;image {width: 100%;height: 100%;filter: blur(20px);transform: scale(2);opacity: 0.5;}}}.main {width: 100%;min-height: 200rpx;background: #fff;border-radius: 30rpx;transform: translateY(-30rpx);padding: 30rpx 0;.info {padding: 10rpx 30rpx;display: flex;font-size: 30rpx;.item {padding-right: 20rpx;color: #888;text {font-weight: 600;color: #333;}}}.list {.group {padding: 15rpx 30rpx;border-bottom: 15rpx solid #f4f4f4;.item {display: flex;justify-content: space-between;align-items: center;padding: 25rpx 0;font-size: 36rpx;color: #555;border-bottom: 1rpx solid #f8f8f8;.left {display: flex;align-items: center;.iconfont {font-size: 38rpx;margin-right: 10rpx;}}.right {.iconfont {font-size: 26rpx;}}}.item:last-child {border: none;}}.group:last-child {border: none;}}}
}
</style>

pages.json配置  uni-id自动路由

	"uniIdRouter": {"loginPage": "uni_modules/uni-id-pages/pages/login/login-withpwd", // 登录页面路径"needLogin": ["pages/edit/edit","/uni_modules/uni-id-pages/pages/userinfo/userinfo" // 需要登录才可访问的页面列表，可以使用正则语法],"resToLogin": true // 自动解析云对象及clientDB的错误码，如果是客户端token不正确或token过期则自动跳转配置的登录页面，配置为false则关闭此行为，默认true}

uni_modules\uni-id-pages/common 登录页面store修改

退出方法  路径修改

	async logout() {// 1. 已经过期就不需要调用服务端的注销接口	2.即使调用注销接口失败，不能阻塞客户端if (uniCloud.getCurrentUserInfo().tokenExpired > Date.now()) {try {await uniIdCo.logout()} catch (e) {console.error(e);}}// 清除tokenuni.removeStorageSync('uni_id_token');// 过期时间uni.setStorageSync('uni_id_token_expired', 0)console.log(`/${pagesJson.uniIdRouter && pagesJson.uniIdRouter.loginPage ? pagesJson.uniIdRouter.loginPage: 'page/self/self'}`,pagesJson.uniIdRouter);uni.redirectTo({// pages.json是否有登录页面 有就走登录url: `/${pagesJson.uniIdRouter && pagesJson.uniIdRouter.loginPage ? pagesJson.uniIdRouter.loginPage: 'page/self/self'}`,});uni.$emit('uni-id-pages-logout')this.setUserInfo({}, { cover: true })},

hasLogin 是否登录 标识符修改  加上过期清空用户信息 返回为false

// 获取用户信息 判断是否过期 未来时间 -现在时间 
let tokenTime = uniCloud.getCurrentUserInfo().tokenExpired - Date.now()
// 100- 200 过期  清空用户信息
if (tokenTime <= 0) {hostUserInfo = {}
}
console.log(uniCloud.getCurrentUserInfo(), "getCurrentUserInfo", );const data = {userInfo: hostUserInfo,// 信息存在 && 大于 0 为未过期 （300 - 200 > 0）hasLogin: Object.keys(hostUserInfo).length != 0 && tokenTime > 0
}

这篇关于uniCloud -- uniIdRouter自动路由的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/674272。

相关文章

一文详解MySQL如何设置自动备份任务

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2
阅读更多...
MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结：常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...
Python使用pynput模拟实现键盘自动输入工具

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述：当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析
阅读更多...
SpringBoot实现文件记录日志及日志文件自动归档和压缩

SpringBoot实现文件记录日志及日志文件自动归档和压缩

《SpringBoot实现文件记录日志及日志文件自动归档和压缩》Logback是Java日志框架,通过Logger收集日志并经Appender输出至控制台、文件等,SpringBoot配置logbac... 目录1、什么是Logback2、SpringBoot实现文件记录日志，日志文件自动归档和压缩2.1、
阅读更多...
SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式？二、使用步骤1.使用$Value 注解2.使用@Configur
阅读更多...
Golang实现Redis分布式锁(Lua脚本+可重入+自动续期)

Golang实现Redis分布式锁(Lua脚本+可重入+自动续期)

《Golang实现Redis分布式锁(Lua脚本+可重入+自动续期)》本文主要介绍了Golang分布式锁实现,采用Redis+Lua脚本确保原子性,持可重入和自动续期,用于防止超卖及重复下单,具有一定... 目录1 概念应用场景分布式锁必备特性2 思路分析宕机与过期防止误删keyLua保证原子性可重入锁自动
阅读更多...
golang实现动态路由的项目实践

golang实现动态路由的项目实践

《golang实现动态路由的项目实践》本文主要介绍了golang实现动态路由项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习... 目录一、动态路由1.结构体（数据库的定义）2.预加载preload3.添加关联的方法一、动态路由1
阅读更多...
python利用backoff实现异常自动重试详解

python利用backoff实现异常自动重试详解

《python利用backoff实现异常自动重试详解》backoff是一个用于实现重试机制的Python库,通过指数退避或其他策略自动重试失败的操作,下面小编就来和大家详细讲讲如何利用backoff实... 目录1. backoff 库简介2. on_exception 装饰器的原理2.1 核心逻辑2.2
阅读更多...
Nginx路由匹配规则及优先级详解

Nginx路由匹配规则及优先级详解

《Nginx路由匹配规则及优先级详解》Nginx作为一个高性能的Web服务器和反向代理服务器,广泛用于负载均衡、请求转发等场景,在配置Nginx时,路由匹配规则是非常重要的概念,本文将详细介绍Ngin... 目录引言一、 Nginx的路由匹配规则概述二、 Nginx的路由匹配规则类型2.1 精确匹配（=）2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2