小程序或 H5 应用开发过程中会遇到首页及部分页面在游客模式下就可以浏览,而部分页面需要用户注册登录后才能访问。本文实践案例就是基于此类场景,介绍如何通过微搭实现应用的非登录和登录浏览控制。
创建应用
在微搭控制台新建空白应用。
![](https://qcloudimg.tencent-cloud.cn/image/document/805614f72fffeab179bbcf5137a1f27d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/805614f72fffeab179bbcf5137a1f27d.png)
创建页面
1. 创建需要登录后才能浏览的页面,命名“权限页面”。
![](https://qcloudimg.tencent-cloud.cn/image/document/7974794ae60b19f2474dbce5d2e36c25.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7974794ae60b19f2474dbce5d2e36c25.png)
2. 在页面中拖入文本组件,文本内容显示“已经登录用户,可以访问此页”。
![](https://qcloudimg.tencent-cloud.cn/image/document/d2db872b5d9727ea873357a190dd494a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d2db872b5d9727ea873357a190dd494a.png)
3. 创建不需要登录就能浏览的页面,命名“非权限页面”。拖入文本组件,文本内容显示“不需要登录,欢迎游客访问!”
![](https://qcloudimg.tencent-cloud.cn/image/document/957da98d665ad0dabffb23aceb9f8a1c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/957da98d665ad0dabffb23aceb9f8a1c.png)
4. 在首页拖拽卡片组件,图文内容保留两个内容,分别命名为“无权限限制”、“有权限限制”。
![](https://qcloudimg.tencent-cloud.cn/image/document/afdacd082a8939e356d1d1cbc6e322be.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/afdacd082a8939e356d1d1cbc6e322be.png)
无权限限制设置单击时打开非权限页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/668b43d4fa3002ebed21b52ec63f68b7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/668b43d4fa3002ebed21b52ec63f68b7.png)
有权限限制设置单击时打开权限页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/e1b83e505d150b424c9d6e6759abcbef.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e1b83e505d150b424c9d6e6759abcbef.png)
配置权限
有一些应用或页面设置为公开访问,未开启登录页,浏览这些应用页面不需要注册和登录账号,这些用户为未注册用户,对于未注册用户,系统默认分配为默认访客角色。
![](https://qcloudimg.tencent-cloud.cn/image/document/4a327161ab8d2efe9af6be32530e89b1.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/4a327161ab8d2efe9af6be32530e89b1.png)
创建登录访客角色,并设置页面权限为可访问全部页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/3b84bf9912ed2fc470c76a6ad59e2ea0.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/3b84bf9912ed2fc470c76a6ad59e2ea0.png)
登录设置
访问控制里自定义应用的登录设置(访问控制请切换回旧版)。
![](https://qcloudimg.tencent-cloud.cn/image/document/2e7edbb22728fa5351b6a5788c14c267.png)
切换到权限设置,选择无需登录访问应用,访问权限选择角色默认访客,无权限处理选择访问无页面权限时跳转至登录页面,外部用户默认权限选择角色登录访客。
![](https://qcloudimg.tencent-cloud.cn/image/document/2e7edbb22728fa5351b6a5788c14c267.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/8429b09fc3bec92a523980033086d9e3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/8429b09fc3bec92a523980033086d9e3.png)
结果验证
发布自定义应用页面权限,可以为小程序或者 H5。
这里以 H5 为例,进行验证说明。
1. 发布成功后,打开应用。
![](https://qcloudimg.tencent-cloud.cn/image/document/96c1b35df0080f11e2be93371d99b4c4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/96c1b35df0080f11e2be93371d99b4c4.png)
2. 选择无权限限制的查看详情,会跳转到非权限页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/b9db347769bb2f0007e470e45e7187d8.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b9db347769bb2f0007e470e45e7187d8.png)
3. 选择有权限限制的查看详情,会跳转到登录页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/e1d0f116d44170afc6f1814c08a8b9f3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e1d0f116d44170afc6f1814c08a8b9f3.png)
4. 输入手机号码验证通过后,登录成功会跳转到权限页面,同时其它页面也可以访问。
![](https://qcloudimg.tencent-cloud.cn/image/document/de18c895070ec789f50f6904fe1aa2f6.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/de18c895070ec789f50f6904fe1aa2f6.png)