HarmonyOS鸿蒙Next登录开发总结

1.开发准备

在开发具备用户身份认证的应用前，需要先申请权限ohos.permission.INTERNET，应用才能具备联网权限进行身份认证。该权限授权方式为system_grant（系统授权），开发者只需要在module.json5配置文件的requestPermissions标签中声明权限，即可获取系统授权。

准备axios三方库利用axios封装登录http请求 打开终端输入ohpm install @ohos/axios 即可下载好该插件最后同步至项目就能全局调用了

2.封装axios请求

登录的关键代码就是发送post请求到指定的登陆页面的url然后传给web组件完成登录操作

/**
 * post请求
 * @param url url请求地址
 * @param params 请求参数
 * @returns 指定类型数据
 */
post<TParam, TResponse>(url: string, params?: TParam, contentType?: TnxHttpContentType, isFullUrl?: boolean): Promise<TResponse> {
    let realParams = contentType !== TnxHttpContentType.URL ? params : CommonTools.buildJson2UrlParams(params);
    return this.http!.post(url, realParams, {
        params: { isFullUrl },
        headers: this.getRequestHeaders(contentType)
    });
}

3.用封装的Web组件封装登录页面和请求

WebViews({
    webviewSrc: this.url,
    onLoadIntercept: (data: WebResourceRequest) => {
        const url = data.getRequestUrl();
        const callBackUrl = `${this.linkDomain}${apiUrls.link.teslaCallback}`;
        if(url.startsWith(callBackUrl)) {
            // 解析url, 取除code
            const code = CommonTools.getUrlValue(url, 'code');
            // post请求拿token
            http.post(apiUrls.login.teslaToken, { code, email: this.userLoginEmail } as ESObject)
            .then((res: TnxUser) => {
                const token: string = res.auth_token.key;
                AppStorage.setOrCreate(TNX_USER_TOKEN, token);
                let data:emitter.EventData ={data:{
                    token:true,
                }}
                // 告诉已经订阅登录状态的页面 完成了登录并且存好了token
                // 发布事件 通知全局拿到token并且刷新UI
                EventBus.getInstance().post(AppEvent.EVENT_TEST,data)
                // 关闭登录页，打开首页
                this.closeAllModal();
                promptAction.showToast({ message: '登录成功!' });
            },
            () => {
                // 回到初始登录页
                this.isShowLogin = false;
            });
            return true;
        }
        return false;
    },
    onPageEnd: (url: string, controller: webview.WebviewController) => {
        controller.runJavaScript("document.getElementsByClassName('tds-flex-item')[0].innerText",
        (error: BusinessError, result: string) => {
            if(result !== "null") {
                let email = result.replaceAll(`\"`, "").trim();
                if(email) {
                    this.userLoginEmail = email;
                    // 将输入的邮箱持久化到磁盘
                    data_preferences.getPreferences(this.context, 'userInfo').then(preferences => {
                        preferences.put('userLoginEmail',this.userLoginEmail).then(() => {
                            preferences.flush()
                        })
                    })
                }
            }
        });
    }
})

4.封装的web组件

关键点 incognitoMode:true 和 webview.WebCookieManager.clearAllCookiesSync(true); 开启隐私模式否则第二次登陆会默认之前输入的账号密码 设置这两个参数能够清空web组件的cookie和一些保存的隐私信息

Web({
    src: this.webviewSrc,
    controller: this.controller,
    incognitoMode:true // 开启隐私模式
})
.javaScriptAccess(true)
.domStorageAccess(true)
.onLoadIntercept((event: OnLoadInterceptEvent) => {
    return this.onLoadIntercept ? this.onLoadIntercept(event.data) : false;
})
.onPageEnd((event: OnPageEndEvent) => {
    this.onPageEnd && this.onPageEnd(event.url, this.controller);
})
.onDisAppear(()=>{
    this.controller.removeCache(true)
    webview.WebCookieManager.clearAllCookiesSync(true);
})