根据法律法规和用户体验要求:
- 用户在注册/登录前应能查看《隐私政策》和《用户服务协议》
- 这两个页面需要支持**匿名访问**(无需登录)
- 用户可以充分了解协议内容后再决定是否注册
文件: app/permission.js
修改前:javascript // 页面白名单 const whiteList = [ '/pages/login', '/pages/register', '/pages/common/webview/index' ]
修改后:javascript // 页面白名单 const whiteList = [ '/pages/login', '/pages/register', '/pages/common/webview/index', '/pages/mine/privacy-policy/index', // 隐私政策(匿名访问) '/pages/mine/user-agreement/index' // 用户协议(匿名访问) ]
权限拦截机制:
navigateTo: 保留当前页面,跳转到新页面redirectTo: 关闭当前页面,跳转到新页面reLaunch: 关闭所有页面,打开到应用内的某个页面switchTab: 跳转到 tabBar 页面检查用户登录状态
javascript if (getToken()) { // 已登录:允许访问 return true }
未登录时检查白名单
javascript if (checkWhite(to.url)) { // 在白名单中:允许访问 return true } else { // 不在白名单:跳转到登录页 uni.reLaunch({ url: loginPage }) return false }
| 页面路径 | 说明 | 用途 |
|---|---|---|
/pages/login |
登录页面 | 用户登录入口 |
/pages/register |
注册页面 | 用户注册入口 |
/pages/common/webview/index |
WebView页面 | 加载外部网页 |
/pages/mine/privacy-policy/index |
隐私政策 | 展示隐私保护政策(新增) |
/pages/mine/user-agreement/index |
用户协议 | 展示服务协议(新增) |
用户操作: 登录页面 → 点击《隐私协议》或《用户协议》 ↓ 查看协议内容(无需登录) ↓ 返回登录页面
代码实现:
```vue
登录即代表同意
<text @click.stop="handleUserAgrement" class="text-blue">《用户协议》
和
<text @click.stop="handlePrivacy" class="text-blue">《隐私协议》
### 场景2: 注册页面查看协议
**用户操作**:
注册页面 → 点击协议链接
↓
查看协议内容(无需登录)
↓
返回注册页面 → 勾选同意 → 完成注册
```
代码实现:
```vue
<checkbox-group @change="handleAgreementChange">
<checkbox value="agreed" :checked="agreedToTerms" color="#007AFF" />
我已阅读并同意
<text class="agreement-link" @click.stop="handleUserAgreement">《用户服务协议》
和
<text class="agreement-link" @click.stop="handlePrivacy">《隐私政策》
### 场景3: 已登录用户查看协议
**用户操作**:
我的页面 → 点击"用户服务协议"或"隐私政策"菜单
↓
查看协议内容
↓
返回我的页面
```
代码实现:
```vue
<view class="list-cell list-cell-arrow" @click="handleUserAgreement">
用户服务协议
## 五、权限控制流程图
用户跳转页面
↓
检查是否已登录?
↓
是 → 允许访问所有页面
↓
否 → 检查是否在白名单?
↓
是 → 允许访问
↓
否 → 强制跳转到登录页
```
清除登录状态
javascript // 在控制台执行 uni.removeStorageSync('token') uni.removeStorageSync('user')
重启小程序
在浏览器中直接输入地址(H5调试): http://localhost:9090/#/pages/mine/privacy-policy/index http://localhost:9090/#/pages/mine/user-agreement/index
✅ 应该能直接访问,不会跳转到登录页
| 测试场景 | 预期结果 |
|---|---|
| 未登录访问登录页 | ✅ 允许访问 |
| 未登录访问注册页 | ✅ 允许访问 |
| 未登录访问隐私政策 | ✅ 允许访问(新增) |
| 未登录访问用户协议 | ✅ 允许访问(新增) |
| 未登录访问首页 | ❌ 跳转到登录页 |
| 未登录访问任务页 | ❌ 跳转到登录页 |
| 已登录访问所有页面 | ✅ 允许访问 |
原因: 白名单路径配置错误
检查:javascript // app/permission.js // 确保路径完全匹配 '/pages/mine/privacy-policy/index' // ✅ 正确 '/pages/mine/privacy-policy' // ❌ 错误(缺少/index)
解决: 确保路径与pages.json中的配置一致
原因: 使用了错误的跳转方法
解决:
```javascript
// ✅ 正确:使用navigateTo,保留当前页面
this.$tab.navigateTo('/pages/mine/privacy-policy/index')
// ❌ 错误:使用redirectTo会关闭当前页面
this.$tab.redirectTo('/pages/mine/privacy-policy/index')
```
原因: H5刷新会重新执行路由守卫
验证: 这是正常现象,移动端不存在刷新操作
解决: 如需H5支持刷新,需要额外配置路由守卫
原则: 只将必要的页面加入白名单
当前白名单:
- ✅ 登录/注册页面:必须匿名访问
- ✅ 协议页面:法律要求匿名访问
- ✅ WebView页面:用于显示外部协议链接
不应加入白名单的页面:
- ❌ 首页
- ❌ 任务页面
- ❌ 消息页面
- ❌ 个人信息页面
- ❌ 其他业务功能页面
协议页面特点:
- ✅ 纯展示内容,无敏感数据
- ✅ 不涉及API调用
- ✅ 不需要用户身份验证
- ✅ 不会泄露系统信息
安全措施:
```vue
协议内容...
## 九、后续优化建议
### 9.1 添加协议版本管理
// app/config.js
module.exports = {
agreements: {
privacyPolicy: {
version: '1.0',
lastUpdate: '2025-01-25',
path: '/pages/mine/privacy-policy/index'
},
userAgreement: {
version: '1.0',
lastUpdate: '2025-01-25',
path: '/pages/mine/user-agreement/index'
}
}
}
```
// 用户首次访问时
localStorage.setItem('agreement_accepted', JSON.stringify({
privacyPolicy: { version: '1.0', acceptedAt: '2025-01-25' },
userAgreement: { version: '1.0', acceptedAt: '2025-01-25' }
}))
// 协议更新时,提示用户重新阅读
if (currentVersion !== acceptedVersion) {
// 显示协议更新提示
}
// 统计协议页面访问量
onLoad() {
// 上报统计数据
uni.request({
url: '/api/statistics/agreement-view',
method: 'POST',
data: {
type: 'privacy-policy',
timestamp: new Date().getTime()
}
})
}
✅ 权限配置: 已将隐私政策和用户协议页面加入白名单
✅ 匿名访问: 用户无需登录即可查看协议内容
✅ 法律合规: 满足《个人信息保护法》等法规要求
✅ 用户体验: 用户可在注册前充分了解协议
app/permission.js - 添加协议页面到白名单app/pages/login.vue - 登录页协议链接可正常访问app/pages/register.vue - 注册页协议链接可正常访问app/pages/mine/index.vue - 已登录用户也可访问app/pages/mine/privacy-policy/index.vue - 支持匿名访问app/pages/mine/user-agreement/index.vue - 支持匿名访问配置完成!现在用户可以在未登录状态下查看隐私政策和用户协议了。🎉