JavaScript 如何做登录鉴权

打开手机APP，输入账号密码点击“登录”后，后台会默默完成一次“身份验证”——这个过程里，前端JS的登录鉴权是用户和系统之间的“隐形守门人”。很多人以为登录只是“填对密码”，其实JS在背后要做好几步“小操作”，咱们用日常买奶茶的例子拆解，就能瞬间看懂。

第一步：把账号密码“打包”，发给系统

就像买奶茶时把钱、订单要求放进外卖袋递给店员，JS会把用户输入的账号、密码（注意：绝对不能明文存本地！）先做简单加密（比如转成特定格式的字符串，防止被中途看到），再通过网络请求发给后端。

举个生活化例子：你跟店员说“要少糖加珍珠”，JS就是帮你把这个要求整理成清晰的“订单单”，不会让你直接对着店员乱喊，同时避免旁人听清你的“密码”（账号密码）。

这一步要注意：不能直接把账号密码存在浏览器里，不然别人借你手机就能直接登录，相当于把奶茶订单塞在奶茶杯里，谁拿到都能用。

第二步：接收系统“通行证”，存在本地

后端验证账号密码正确后，会返回一个叫“Token”的东西——这相当于店员给你的取餐牌，上面有唯一编号，不用每次都回奶茶店查你身份。

JS会把这个Token存在浏览器的“安全小仓库”里：如果是短期用的登录信息，存在SessionStorage里（关闭页面就消失，像奶茶店临时取餐牌，取完就废）；如果要留着下次打开还能登录，就存在LocalStorage里（相当于会员取餐牌，长期有效）。

别用Cookie！很多人容易混淆，Cookie是老技术，现在JS更推荐存Token，就像现在大家都用取餐码，不用老式的纸质小票，更安全。

第三步：每次请求都“亮取餐牌”

之后你点“我的订单”“收藏”这类需要登录的按钮时，JS会自动把存在本地的Token偷偷加到请求里，发给后端——相当于你每次去取餐，都把取餐牌递过去，店员一查编号就知道你是会员。

比如你要查订单，JS会在请求地址后面加一串类似“token=abc123”的内容，后端一收到，核对Token有效，就给你返回订单信息；如果Token过期或者错了，就提示“请重新登录”，相当于取餐牌过期了，得重新排队买奶茶。

第四步：登出时“销毁通行证”

你点“退出登录”时，JS会做最后一步：把本地的Token删掉，同时告诉后端“这个Token作废”——就像你吃完奶茶把取餐牌还给店员，店员当场剪碎，你下次再来就得重新买新的取餐牌。

这一步很重要，不然别人借你手机，打开LocalStorage就能拿到你的Token，直接跳过登录进你的账号，相当于你把取餐牌落在桌上，别人捡了就能用。

其实JS做登录鉴权，核心就是“不存明文、拿凭证、验凭证、清凭证”四步，跟日常买奶茶的流程完全对应。只要记住这些生活化的例子，下次再看到“Token”“SessionStorage”这类词，就不会觉得陌生了——毕竟咱们每天都在做类似的“身份验证”小事，换成编程逻辑就是这么简单。