uniapp 页面登录控制

1,只需在项目的pages.json内配置登录页路径、需要登录才能访问的页面等信息,uni-app框架的路由跳转,会自动在需要登录且客户端登录状态过期或未登录时跳转到登录页面。

删除保存到内存的token  也会判断为token不存在 这个功能可以用于测试,有这个功能可以管理所有的页面了。

"uniIdRouter": {//token不正确或token过期 时生效
        "loginPage": "pages/index/index", // 登录页面路径
        "needLogin": [
            "pages/detail/.*" // 需要登录才可访问的页面列表,可以使用正则语法
        ],
        "resToLogin": true // 自动解析云对象及clientDB的错误码,如果是客户端token不正确或token过期则自动跳转配置的登录页面,配置为false则关闭此行为,默认true
    }

2.自动跳转到登录页面时会携带uniIdRedirectUrl参数,其值为encodeURIComponent(${跳转前的页面(包含路径和参数的完整页面地址)}),如果希望用户登录后跳转回之前的页面,可以使用此参数实现。

onLoad(options) {
            this.uniIdRedirectUrl = decodeURIComponent(options.uniIdRedirectUrl)
        },
        methods: {
            async login() {
                // ...执行登录操作,在成功回调里跳转页面
                if (this.uniIdRedirectUrl) {
                    uni.redirectTo({
                        url: this.uniIdRedirectUrl
                    })
                }

}

3,uniIdRedirectUrl地址复杂要解析两次才能跳转成功 就是在登录页面闪2次,第一次跳转失败,回来再跳转。

4,swtab 跳转不可以 因为他不能携带参数

5,推荐使用,在每一个onshow 页面进行判断 登录。在全局app.js 中加入判断 ,这个app js  只判断一次,在打开app的时候

    let token = getToken()
            if (!token) {//清空内存 的时候生效
                console.log('1111')
                //不存在则跳转至登录页
                uni.reLaunch({
                    url: "/pages/weixin/weixin"
                })
            }

### UniApp 登录拦截与页面权限控制实现方式 在开发基于 UniApp 的应用程序时,为了确保用户的隐私安全以及功能模块的合理使用,通常需要设置登录拦截机制。以下是具体实现方法: #### 1. 使用 `uni.addInterceptor` 方法 通过官方提供的 `uni.addInterceptor` API 可以轻松实现全局请求或页面跳转的拦截逻辑[^1]。 ```javascript // 初始化拦截器 uni.addInterceptor('navigateTo', { invoke(args) { // 判断目标页面是否需要登录验证 const needLoginPages = ['pages/protectedPage/protectedPage']; // 需要保护的页面路径列表 if (needLoginPages.includes(args.url.split('?')[0]) && !getToken()) { // 如果未登录则重定向到登录页 args.url = '/pages/login/login'; } }, }); ``` 上述代码片段中定义了一个简单的导航拦截器,在用户尝试访问受保护页面时会自动检测是否存在有效的 token。如果不存在,则强制跳转至登录界面。 #### 2. 原始函数改造方案 对于不支持直接使用拦截器的情况或者更复杂的业务需求下,可以通过修改原有事件绑定的方式手动加入校验流程[^2]: ```javascript bindTap: function(e){ let token = getToken(); // 获取当前存储中的token值 if (!token){ uni.navigateTo({ url:'login' }); return; } uni.navigateTo({ url:`detail?id=${e.detail.id}` }) } ``` 此方法适用于特定按钮点击或其他交互行为触发后的单次检查场景,灵活性较高但维护成本较大。 #### 3. TabBar 页面特殊处理 需要注意的是,部分平台(如微信小程序)内部实现了自己的 tabbar 控制逻辑,并不会调用标准的 `switchTab` 接口。因此单独依赖于接口级别的拦截可能失效[^3]。针对这种情况建议如下解决办法: - **OnShow 生命周期监听**: 在每一个作为 tabBar item 对应的 Page 文件内的 onShow 函数里执行同样的身份验证过程。 ```javascript export default{ data(){ return {}; }, methods:{}, onLoad(){}, onShow(){ this.checkAuth(); }, checkAuth:function(){ var that=this; wx.getStorage({ key:"sessionid", success(res){ console.log("已登录"); }, fail(err){ wx.reLaunch({url:'/pages/auth/index'}); } }); } }; ``` 以上三种策略可以根据实际项目的需求组合运用,从而构建起一套完整的用户认证体系。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值