uni-app uni-id-pages插件需求 在访问个人信息时若未登录则跳转到登录页面

uni-app uni-id-pages插件需求 在访问个人信息时若未登录则跳转到登录页面

需求：在访问个人信息时，如果未登录，希望跳转到登录页面

3 回复

这个是uniIdRouter的功能，pages.json文档仔细看下，在里面配哪些页面要登录才能访问

更多关于uni-app uni-id-pages插件需求 在访问个人信息时若未登录则跳转到登录页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢

在uni-app中使用uni-id-pages插件来实现访问个人信息页面时的登录检查，可以通过编写一个中间件或守卫函数来实现。如果检测到用户未登录，则重定向到登录页面。以下是一个示例代码案例，展示了如何实现这一功能。

首先，确保你的项目中已经安装了uni-id-pages插件，并正确配置了uni-id服务。

1. 配置uni-id

确保在manifest.json中配置了uni-id相关设置，并引入了uni-id-pages插件。

// manifest.json
{
  "plugins": {
    "uni-id": {
      "provider": "uniCloud"
    },
    "uni-id-pages": {
      "version": "latest",
      "provider": "wxa9e1f05c7a812345" // 替换为你的provider
    }
  }
}

2. 创建中间件函数

在pages目录下创建一个中间件文件，例如checkAuth.js，用于检查用户是否登录。

// pages/middleware/checkAuth.js
export default function (to, from, next) {
  const uniId = uni.getStorageSync('uni_id_token'); // 假设token保存在本地存储
  if (uniId) {
    next(); // 已登录，继续访问目标页面
  } else {
    uni.redirectTo({
      url: '/pages/login/login' // 未登录，重定向到登录页面
    });
  }
}

3. 在目标页面应用中间件

在需要保护的页面（如个人信息页面）的script部分引入并使用该中间件。

<!-- pages/profile/profile.vue -->
<template>
  <view>
    <!-- 个人信息页面内容 -->
  </view>
</template>

<script>
import checkAuth from '@/pages/middleware/checkAuth.js';

export default {
  onLoad() {
    checkAuth(this.$route, null, () => {
      // 中间件通过，继续页面加载逻辑
      console.log('用户已登录，加载个人信息页面');
    });
  },
  // 其他页面逻辑...
};
</script>

4. 登录页面逻辑

确保登录页面能够正确处理登录逻辑，并在登录成功后保存token到本地存储。

// pages/login/login.vue
// 登录成功回调
uni.setStorageSync('uni_id_token', loginResult.token);
uni.redirectTo({
  url: '/pages/profile/profile' // 登录成功后重定向回个人信息页面
});

以上代码展示了如何在uni-app中使用uni-id-pages插件来实现访问个人信息页面时的登录检查。通过中间件函数检查用户是否登录，并根据检查结果决定是否重定向到登录页面。

回到顶部