正规网站建设平台WordPress防伪证书插件

正规网站建设平台,WordPress防伪证书插件,wordpress lazy load,深圳网站设计如果一个应用没有登录系统#xff0c;它大概率只是个 Demo。 从这一篇开始#xff0c;我们的「任务清单 App」正式进入 “产品级应用”阶段。一、真实 App 的登录系统需要解决哪些问题#xff1f; 很多人写登录#xff0c;只写了一个页面和一个接口调用#xff0c;但真实情…如果一个应用没有登录系统它大概率只是个 Demo。从这一篇开始我们的「任务清单 App」正式进入“产品级应用”阶段。一、真实 App 的登录系统需要解决哪些问题很多人写登录只写了一个页面和一个接口调用但真实情况远比这复杂我们至少要解决用户是否已登录Token 存在哪里App 重启是否自动登录多个页面如何共享登录态退出登录如何清理状态Token 过期如何处理 这些问题的答案都指向全局状态管理。二、设计登录系统的整体架构先别写代码推荐结构entry/ ├─ model/ │ ├─ AuthModel.ets // 登录状态模型全局 │ └─ TaskModel.ets ├─ service/ │ ├─ AuthService.ets // 登录 / 退出 / 刷新 token │ └─ TaskService.ets ├─ store/ │ └─ AppStore.ets // 全局状态入口 ├─ pages/ │ ├─ Login.ets │ └─ Index.ets不要把登录状态写在某个页面里登录态是全局状态三、第一步定义登录状态模型AuthModelmodel/AuthModel.etsObservedV2exportclassAuthModel{token:stringuserName:stringisLogin:booleanfalselogin(token:string,userName:string){this.tokentokenthis.userNameuserNamethis.isLogintrue}logout(){this.tokenthis.userNamethis.isLoginfalse}}教学重点登录状态 数据模型UI 不直接维护登录变量四、第二步封装登录服务网络 存储service/AuthService.etsimportpreferencesfromohos.data.preferencesimporthttpfromohos.net.httpconstTOKEN_KEYUSER_TOKENconstUSER_KEYUSER_NAMEexportclassAuthService{staticasynclogin(account:string,password:string){consthttpRequesthttp.createHttp()constresponseawaithttpRequest.request(https://example.com/api/login,{method:http.RequestMethod.POST,extraData:{account,password}})constresultJSON.parse(response.resultasstring)return{token:result.token,userName:result.userName}}staticasyncsaveAuth(token:string,userName:string){constprefawaitpreferences.getPreferences(getContext(),auth)awaitpref.put(TOKEN_KEY,token)awaitpref.put(USER_KEY,userName)awaitpref.flush()}staticasyncloadAuth(){constprefawaitpreferences.getPreferences(getContext(),auth)consttokenawaitpref.get(TOKEN_KEY,)constuserNameawaitpref.get(USER_KEY,)return{token,userName}}staticasyncclearAuth(){constprefawaitpreferences.getPreferences(getContext(),auth)awaitpref.clear()awaitpref.flush()}} 网络、缓存全部在 Service 层 Model 不关心存储细节五、第三步全局状态 StoreAppStore这是整篇的核心设计。store/AppStore.etsimport{AuthModel}from../model/AuthModelimport{AuthService}from../service/AuthServiceObservedV2exportclassAppStore{authnewAuthModel()loading:booleantrueasyncinit(){const{token,userName}awaitAuthService.loadAuth()if(token){this.auth.login(token,userName)}this.loadingfalse}asynclogin(account:string,password:string){constresultawaitAuthService.login(account,password)this.auth.login(result.token,result.userName)awaitAuthService.saveAuth(result.token,result.userName)}asynclogout(){this.auth.logout()awaitAuthService.clearAuth()}}教学重点非常重要App 启动时只初始化一次所有页面共享同一个 AppStore登录 / 退出是统一入口六、第四步将 AppStore 变成“全局状态”使用Provider / Consume。App 根组件如 EntryComponentV2 struct AppRoot{Local storenewAppStore()Onceasyncinit(){awaitthis.store.init()}build(){if(this.store.loading){Text(初始化中...)}else{if(this.store.auth.isLogin){Index()}else{Login()}}}}提供全局状态Provider appStore:AppStorethis.store任意页面获取登录态Consume appStore:AppStoreText(你好${this.appStore.auth.userName}) 这就是HarmonyOS 的全局状态管理方式七、第五步登录页面实现pages/Login.etsComponentV2 struct Login{Consume appStore:AppStore Local account:stringLocal password:stringbuild(){Column({space:12}){TextInput({placeholder:账号}).onChange(vthis.accountv)TextInput({placeholder:密码,type:InputType.Password}).onChange(vthis.passwordv)Button(登录).onClick(async(){awaitthis.appStore.login(this.account,this.password)})}.padding(16)}}八、退出登录怎么做在任意页面Consume appStore:AppStoreButton(退出登录).onClick(()this.appStore.logout())UI 会自动切回 Login 页面。九、Token 如何自动带到请求中统一在 Service 层处理headers:{Authorization:Bearer${appStore.auth.token}} 不要在 UI 拼 Token 网络层统一处理十、这一篇你真正学会了什么你已经掌握✔ 登录系统的完整设计✔ Token 管理✔ 自动登录✔ 全局状态共享✔ Provider / Consume 用法✔ 多页面登录态切换这已经是商业 App 的标准做法。结语登录系统不是一个页面而是一整套状态管理体系。