目录
自动路由
云对象响应触发needLogin
获取当前用户信息getCurrentUserInfo
实战应用
个人中心页面
pages.json配置 uni-id自动路由
uni_modules\uni-id-pages/common 登录页面store修改
自动路由
支持的HBuilderX版本
| uni-app | uni-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()
该方法为同步方法。
响应参数
| 字段 | 类型 | 说明 |
|---|---|---|
| uid | Number | 当前用户uid |
| role | Array | 用户角色列表。admin用户返回["admin"] |
| permission | Array | 用户权限列表。注意admin角色此数组为空 |
| tokenExpired | Number | token过期时间 |
未能获取用户信息时返回以下结果
{
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
}
