什么是 PWA？
PWA 是指“渐进式 Web 应用”，是一种能够在离线环境下运行、可以安装到手机或电脑桌面上的 Web 应用。
PWA 的优点：
- 可以像本地应用一样运行
- 支持离线访问
- 可以像原生应用那样向用户发送通知
- 所有资源都通过 https 加载，更加安全
PWA 应用中的用户管理
PWA 应用中的用户管理通常需要实现以下功能：
- 注册账号
- 登录/注销
- 修改个人信息
- 密码重置
- 权限管理
在实现这些功能时，需要考虑到以下几个方面：
1. 数据存储
我们通常会用 IndexedDB 或 WebSQL 来存储用户信息，方便离线访问。这里以 IndexedDB 为例，示例代码如下：
-- -------------------- ---- -------
----- ------- - ---------------------- --
----------------------- - -------- ------- -
----- -- - -------------------
----- ----------- - ----------------------------- - -------- ---- --
-
----------------- - -------- ------- -
----- -- - -------------------
----- ----------- - ------------------------- ------------
----- ----------- - --------------------------------
----- ---- - ---- -- ----- ------- ------ ----------------- --------- ---------
----- -------------- - ---------------------
------------------------ - -------- -- -
---------------------
-
-2. 认证与授权
用户登录后，服务器要返回 token（Json Web Token），前端将 token 存储到 localStorage 或 IndexedDB 中。下次用户访问时，从 localStorage 或 IndexedDB 中取出 token，附加在请求头中，服务器才能识别是已登录用户。示例代码如下：
-- -------------------- ---- -------
-- ----
-------------------- ---------- ------- --------- ----------
-------------- -- -
------------------------------------ --------------------
--
-- -------- ---
----------------- - -------- ----------------- ------- ----------------------------------------- --
-------------- -- -
--------------------------
--3. 密码加密
前端不宜将未加密的用户密码存储到 IndexedDB 中，应先将密码加密后存储。这里可以采用 bcryptjs 库进行加密，示例代码如下：
// 用户注册
import bcrypt from 'bcryptjs'
const salt = bcrypt.genSaltSync(10)
const password = '123456'
const hash = bcrypt.hashSync(password, salt)
const user = {id: 1, name: 'john', email: 'john@gmail.com', password: hash}4. 安全性
除了密码需要加密存储外，我们还需要采取其他一些安全措施，例如防止 CSRF（跨站请求伪造）攻击、XSS（跨站脚本）攻击等，这里不再赘述。
总结
PWA 应用的用户管理需要考虑到数据存储、认证与授权、密码加密和安全性等问题，同时需要灵活运用 IndexedDB、localStorage、bcryptjs 等前端技术来实现。在实际项目中，也可结合后端框架的认证与授权机制来提高安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbe709f6b2d6eab31f95dc