uni-id-pages的使用

起飞羊

已于 2024-02-15 00:47:30 修改

阅读量1.5k

点赞数 8

文章标签： uni-app

于 2024-02-12 01:19:40 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61744997/article/details/136098947

版权

本文介绍了如何在uni-app项目中安装和配置uni-id-pages插件，包括设置config.json文件，导入init.js并在App.vue中集成，以及使用uniIdRouter实现自动路由控制。还提到了一些常见问题及解决方法，如集合重命名和uni-id-co函数的使用问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载uni-id-pages插件

uni-id-pages - DCloud 插件市场

2.新建目录uni-id,添加config.json文件

config.json文件代码：

{
  "passwordSecret": "", 
  "passwordStrength": "medium", 
  "tokenSecret": "", 
  "tokenExpiresIn": 7200, 
  "tokenExpiresThreshold": 3600, 
  "passwordErrorLimit": 6, 
  "passwordErrorRetryTime": 3600, 
  "autoSetInviteCode": false,
  "forceInviteCode": false, 
  "app": { 
    "tokenExpiresIn": 2592000,
    "tokenExpiresThreshold": 864000,
    "oauth": {      
      "weixin": {
        "appid": "",
        "appsecret": ""
      },     
      "qq": {
        "appid": "",
        "appsecret": ""
      },
      "apple": { 
        "bundleId": ""
      }
    }
  },
  "web": { 
    "tokenExpiresIn": 7200,
    "tokenExpiresThreshold": 3600,
    "oauth": {
      "weixin-h5": { 
        "appid": "",
        "appsecret": ""
      },
      "weixin-web": { 
        "appid": "",
        "appsecret": ""
      }
    }
  },
  "mp-weixin": {
    "tokenExpiresIn": 259200,
    "tokenExpiresThreshold": 86400,
    "oauth": {     
      "weixin": {
        "appid": "",
        "appsecret": ""
      }
    }
  },
  "mp-qq": {
    "tokenExpiresIn": 259200,
    "tokenExpiresThreshold": 86400,
    "oauth": {     
      "qq": {
        "appid": "",
        "appsecret": ""
      }
    }
  },
  "mp-alipay": {
    "tokenExpiresIn": 259200,
    "tokenExpiresThreshold": 86400,
    "oauth": {      
      "alipay": {
        "appid": "",
        "privateKey": "", 
        "keyType": "PKCS8" 
      }
    }
  },
  "service": {
    "sms": {
      "name": "", 
      "codeExpiresIn": 180, 
      "smsKey": "", 
      "smsSecret": "", 
      "scene": {
        "bind-mobile": { 
          "templateId": "", 
          "codeExpiresIn": 240 
        }
      }
    },
    "univerify": {
      "appid": "", 
      "apiKey": "", 
      "apiSecret": ""
    }
  }
}

记得修改默认的passwordSecret和tokenSecret（自定义），避免造成系统安全隐患。

3.需要在App.vue中导入uni-id-pages的init.js文件

<script>
  import uniIdPageInit from '@/uni_modules/uni-id-pages/init.js';
  export default {
    onLaunch: async function() {
      console.log('App Launch')
      await uniIdPageInit()
    },
    onShow: function() {
      console.log('App Show')
    },
    onHide: function() {
      console.log('App Hide')
    }
  }
</script>

4. uniIdRouter自动路由

uniIdRouter 是一个运行在前端的、对前端页面访问权限路由进行控制的方案。只需在项目的pages.json内配置登录页路径、需要登录才能访问的页面等信息，uni-app框架的路由跳转，会自动在需要登录且客户端登录状态过期或未登录时跳转到登录页面。

在项目根目录的pages.json中，已包含uniIdRouter

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "uni_modules/uni-id-pages/pages/userinfo/deactivate/deactivate",
            "style": {
                "navigationBarTitleText": "注销账号"
            }
        },
        {
            "path": "uni_modules/uni-id-pages/pages/userinfo/userinfo",
            "style": {
                "navigationBarTitleText": "个人资料"
            }
        },
        {
            "path": "uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile",
            "style": {
                "navigationBarTitleText": "绑定手机号码"
            }
        },
        {
            "path": "uni_modules/uni-id-pages/pages/login/login-smscode",
            "style": {
                "navigationBarTitleText": "手机验证码登录"
            }
        },
        {
            "path": "uni_modules/uni-id-pages/pages/register/register",
            "style": {
                "navigationBarTitleText": "注册"
            }
        },
        {
            "path": "uni_modules/uni-id-pages/pages/retrieve/retrieve",
            "style": {
                "navigationBarTitleText": "重置密码"
            }
        }, {
            "path": "uni_modules/uni-id-pages/pages/common/webview/webview",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        }
        ,{
            "path" : "uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "修改密码",
                "enablePullDownRefresh": false
            }
            
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#FFF",
        "backgroundColor": "#F8F8F8"
    }
    
    "uniIdRouter": {
        "loginPage": "uni_modules/uni-id-pages/pages/login/login-withoutpwd",
        "needLogin": [
            "pages/edit/edit",
            "uni_modules/uni-id-pages/pages/userinfo/userinfo"
        ],
        "resToLogin": true
    }
}