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);
			}
		}
		// 清除token
		uni.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
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/367471.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

RK3568平台 安卓hal3适配usb camera

RK3568平台 安卓hal3适配usb camera

一.RK安卓hal3 camera框架 Camera hal3 在 android 框架中所处的位置如上图&#xff0c; 对上&#xff0c;主要实现 Framework 一整套 API 接口&#xff0c;响应其 控制命令&#xff0c;返回数据与控制参数结果。 对下&#xff0c; 主要是通 V4l2 框架实现与 kernel 的交互。3a…
阅读更多...
c语言---操作符（详解）

c语言---操作符（详解）

目录 一、操作符的分类二、算术操作符三、 移位操作符3.1<<左移操作符3.1.1移位规则3.1.2直接上代码以及解释 3.2>> 右移操作符3.2.1移位规则3.2.2画图解释 3.3注意 四、位操作符&#xff1a;&、|、^、~4.1&按位与4.1.1按位与的计算逻辑4.1.2代码4.1.3运行…
阅读更多...
山上有路路难行

山上有路路难行

原乡情浓 - 邓丽君作词 : Chong Nou作曲 : 汤尼山上有路路难行嘞弯弯曲曲一层又一层嘞小哥要去看小妹嘞不怕山高路不平嘞山上石头大又硬嘞歪歪倒倒一层又一层嘞小哥不怕硬石头嘞只怕小妹心肠硬嘞路边椰树高又高嘞风吹椰树一摇又一授嘞小妹爱哥身体壮嘞可爱小妹身妙条嘞香蕉树上…
阅读更多...
机器学习——绪论总结

机器学习——绪论总结

目录 一、引入 二、基本术语 三、假设空间与归纳偏 四、模型选择 一、引入 机器学习&#xff1a;通过计算手段&#xff0c;得出具有能够自我修改、完善能力的模型&#xff0c;利用经验改善系统自身性能。算法使用数据得到模型的过程即称为学习&#xff0c;或训练 流程&…
阅读更多...
前端JavaScript篇之对 rest 参数的理解、ES6中模板语法与字符串处理

前端JavaScript篇之对 rest 参数的理解、ES6中模板语法与字符串处理

目录 对 rest 参数的理解ES6中模板语法与字符串处理 对 rest 参数的理解 rest参数是一种在函数定义中使用的特殊语法&#xff0c;它允许函数接受任意数量的参数&#xff0c;并将它们收集到一个数组中。通俗地说&#xff0c;rest参数就像是一个容器&#xff0c;用来存放函数接收…
阅读更多...
cnpm : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\cnpm.ps1

cnpm : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\cnpm.ps1

cnpm命令被禁止使用 我已经安装cnpm &#xff0c;但是使用不了&#xff0c;重新安装也没用。 报错如下图&#xff1a; cnpm无法使用报错 解决问题 1、打开系统Windows PowerShell,使用管理员身份运行。 打开Windows PowerShell 2、输入set-ExecutionPolicy RemoteSigned&a…
阅读更多...
深度学习：数据驱动的人工智能革命

深度学习：数据驱动的人工智能革命

文章目录 每日一句正能量前言什么是深度学习推动AI发展不同阶段的“三大驱动 ”1、技术驱动&#xff1a;算法和计算力是主要驱动力2、计算力的三驾马车&#xff1a;芯片、超级计算机、云计算3、数据驱动&#xff1a;描绘个性化画像&#xff1b; 后记 每日一句正能量 一般青年的…
阅读更多...
Java数组的遍历

Java数组的遍历

目录 数组的遍历使用for循环遍历数组使用for-each循环遍历数组使用while循环和迭代器遍历数组使用Java 8的流API遍历数组 数组遍历的应用求数组中的最大值查询数组中指定位置的元素将查指定元素对应的索引的功能提取为方法添加数组元素删除数组元素 数组的遍历 Java数组的遍历…
阅读更多...
Day17、18、19学习记录

Day17、18、19学习记录

#c语言知识 内存管理 1.作用域 &#xff08;1&#xff09;代码块作用域&#xff08;代码块是{}之间的一段代码&#xff09; &#xff08;2&#xff09;函数作用域 &#xff08;3&#xff09;文件作用域 2.局部变量&#xff08;自动变量auto&#xff09;&#xff1a; 在函…
阅读更多...
Matlab plot绘图的 title 语法

Matlab plot绘图的 title 语法

x 0:1:10; >> y x.^2 -10*x15; >> plot(x,y) >> title(x_y, interpreter, none) title 里面的 x_y , y不会被当作下标。
阅读更多...
软件工程（最简式总结）

软件工程（最简式总结）

目录 第一章:概述 1.软件危机的表现原因 2.常见的软件开发方法包括&#xff1a; 3.软件工程基本原则 4.软件工程三要素 5.设计模式的分类 6.针对变换型数据流设计步骤 7.针对事务型数据流设计步骤 第二章&#xff1a;软件过程 1.软件生命周期 2.软件过程模型 &…
阅读更多...
数据结构篇-05：哈希表解决字母异位词分组

数据结构篇-05：哈希表解决字母异位词分组

本文对应力扣高频100 ——49、字母异位词分组 哈希表最大的特点就是它可以把搜索元素的时间复杂度降到O(1)。这一题就是要我们找到 “字母异位词” 并把它们放在一起。 “字母异位词”就是同一个单词中字母的不同组合形式。判断“字母异位词”有两个视角&#xff1a;1、所含字…
阅读更多...
《计算机网络简易速速上手小册》第1章：计算机网络技术基础（2024 最新版）

《计算机网络简易速速上手小册》第1章：计算机网络技术基础（2024 最新版）

文章目录 1.1 OSI 模型简介 - 深入探究1.1.1 基础知识1.1.2 重点案例&#xff1a;构建简易 HTTP 服务器1.1.3 拓展案例1&#xff1a;网络层数据包捕获1.1.4 拓展案例2&#xff1a;传输层 TCP 连接 1.2 TCP/IP 协议栈 - 深入探究1.2.1 基础知识1.2.2 重点案例&#xff1a;使用 P…
阅读更多...
2.3作业 编写一个shell 脚本，判断输入的是否是数字

2.3作业 编写一个shell 脚本，判断输入的是否是数字

#!/bin/bashvar$1 len${#var} j0 for(($j;$j<$len;((j)))) doif [ ${var:$j:1} -eq 0 ]then echo "第$j位数字是0"elif [ ${var:$j:1 } -eq 1 ]then echo "第$j位数字是1"elif [ ${var:$j:1} -eq 2 ]then echo "第$j位数字是2"elif [ ${var:$…
阅读更多...
【Linux】理解系统中一个被打开的文件

【Linux】理解系统中一个被打开的文件

文件系统 前言一、C语言文件接口二、系统文件接口三、文件描述符四、struct file 对象五、stdin、stdout、stderr六、文件描述符的分配规则七、重定向1. 重定向的原理2. dup23. 重谈 stderr 八、缓冲区1. 缓冲区基础2. 深入理解缓冲区3. 用户缓冲区和内核缓冲区4. FILE 前言 首…
阅读更多...
题目: 有1234个数字, 组成多个互不相同且无重复数字的三位数？ 都是多少？

题目: 有1234个数字, 组成多个互不相同且无重复数字的三位数？ 都是多少？

lua脚本如下 最原始的解题方法 local str{} local i, j, k0, 0, 0 for i1, 4 do for j1, 4 do for k1, 4 do if i~j and i~k and j~k then str[#str1]i..j..k end end end end print("组成的数有"..#str) print(table.unpack(str)) 运行的结果如下 组成的数有24 1…
阅读更多...
【DDD】学习笔记-代码模型的架构决策

【DDD】学习笔记-代码模型的架构决策

代码模型属于软件架构的一部分&#xff0c;它是设计模型的进化与实现&#xff0c;体现出了代码模块&#xff08;包&#xff09;的结构层次。在架构视图中&#xff0c;代码模型甚至会作为其中的一个视图&#xff0c;通过它来展现模块的划分&#xff0c;并定义运行时实体与执行视…
阅读更多...
跨平台开发：浅析uni-app及其他主流APP开发方式

跨平台开发：浅析uni-app及其他主流APP开发方式

随着智能手机的普及&#xff0c;移动应用程序&#xff08;APP&#xff09;的需求不断增长。开发一款优秀的APP&#xff0c;不仅需要考虑功能和用户体验&#xff0c;还需要选择一种适合的开发方式。随着技术的发展&#xff0c;目前有多种主流的APP开发方式可供选择&#xff0c;其…
阅读更多...
【HTML 基础】框架 iframe 标签

【HTML 基础】框架 iframe 标签

文章目录 1. 基本用法2. 设置框架样式3. frameborder 和 scrolling 属性4. 在框架中显示其他内容5. 响应式框架6. 注意事项结语 在 Web 开发中&#xff0c;有时候我们需要在页面中嵌套其他网页或内容&#xff0c;这时候就可以使用 HTML 的框架标签之一<iframe>。<ifra…
阅读更多...
20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll 2024/2/2 10:48 https://blog.csdn.net/feinifi/article/details/132548556 Could not locate cudnn_ops_infer64_8.dll. Please make sure it is in your library path!解决办法 安装cuDNN c:\faster-whisper-…
阅读更多...
最新文章

Copyright @ 2022~2023