uniapp云函数安装uni-id

本文详细介绍了如何在项目中配置uni-id,包括从选择uni-id模板开始,创建并配置config.json文件,上传uni-id模块到云函数,以及在uniCloud数据库中添加uni-id数据表。关键步骤包括理解uni-config-center公用模块的路径,配置passwordSecret和tokenSecret参数,以及在云函数中管理uni-id的依赖。

如果你的项目在创建里就选择uni-id的模板,安装这一步可省略,但配置部分一样是需要的。
在这里插入图片描述
点击导入到当前项目中
在这里插入图片描述
配置uni-id
在uni-config-center公用模块下创建uni-id目录
这部分官网描述不是很清楚,如果不知道公用模块的目录在哪里,很容易搞糊涂,我也是通过其示例代码才知道是要在uni_modules\uni-config-center\uniCloud\cloudfunctions\common\uni-config-center这个目录下创建uni-id目录

在这里插入图片描述
在创建的uni-id目录下再创建config.json文件

在这里插入图片描述
config.json内容以下

{
   
   
    "passwordSecret": "bctos-weixin-h5",
    "tokenSecret": "bctos-weixin-h5",
    "tokenExpiresIn": 7200,
    "tokenExpiresThreshold": 600,
    "passwordErrorLimit": 6,
    "
UniApp 中使用 `uni-id-pages` 实现登录页面跳转及路径定义时,可以通过配置 `pages.json` 文件中的 `uniIdRouter` 属性来设置登录页路径。具体操作如下: ### 配置登录页面路径 在 `pages.json` 文件中,通过 `uniIdRouter` 对象的 `loginPage` 属性指定登录页面的路径。例如: ```json { "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 } } ``` 上述配置中,`loginPage` 指定了使用账号密码登录的页面路径为 `uni_modules/uni-id-pages/pages/login/login-withpwd`,该页面会在用户未登录或登录状态失效时自动跳转[^2]。 ### 定义多个登录页面路径 虽然 `uniIdRouter` 的 `loginPage` 属性仅接受一个字符串参数用于指定登录页面路径,但若需要支持多种登录方式(如无密码登录和有密码登录),可以在前端逻辑中根据条件判断跳转到不同的登录页面。例如,在某个页面的 `onLoad` 生命周期函数中: ```javascript onLoad() { const loginType = uni.getStorageSync('loginType'); // 假设存储了登录类型 if (loginType === 'withoutpwd') { uni.redirectTo({ url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd' }); } else { uni.redirectTo({ url: '/uni_modules/uni-id-pages/pages/login/login-withpwd' }); } } ``` 以上代码展示了如何根据用户的登录类型动态跳转至对应的登录页面。尽管 `uniIdRouter` 本身不直接支持多个登录页面路径配置,但通过这种方式可以实现类似功能[^1]。 ### 自动路由控制 `uniIdRouter` 是一个运行在前端的路由控制方案,它能够根据用户的登录状态自动决定是否跳转至登录页面。当访问的页面被列为 `needLogin` 列表中的一员,并且用户当前未登录或登录状态已过期时,框架会自动跳转至 `loginPage` 指定的页面[^3]。 ### 示例:登录页面逻辑 对于具体的登录页面逻辑实现,可以参考以下 Vue 组件示例代码: ```vue <template> <view> <input v-model="username" placeholder="用户名" /> <input v-model="password" placeholder="密码" type="password" /> <button @click="login">登录</button> </view> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { login() { uni.request({ url: 'http://your-api-url/login', method: 'POST', data: { username: this.username, password: this.password }, success: (res) => { if (res.statusCode === 200) { uni.setStorageSync('token', res.data.token); uni.reLaunch({ url: '/pages/home/HomePage' }); } }, fail: (err) => { console.error(err); } }); } } }; </script> ``` 此示例展示了一个简单的登录页面,其中包含了用户名和密码输入框以及登录按钮。点击登录按钮后,会发送 POST 请求至服务器验证用户凭证,成功后将 Token 存储于本地并跳转至主页或其他页面[^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美,让我痴迷

你的好,我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值