如何在 Angular 应用程序中处理 API 凭据？

Posted 2023-03-15

【中文标题】如何在 Angular 应用程序中处理 API 凭据？

【英文标题】：How to handle API credentials in an Angular app?

【发布时间】：2018-04-07 21:03:55

【问题描述】：

我在 Laravel 中创建了一个 API，并且在 Angular 中有一个小型 SPA，它通过用户名和密码登录应用程序并接收令牌。有了这个令牌，你可以用 API 做一些基本的事情。

不能在 Angular 应用程序（纯文本 - javascript 等）中保存凭据（用户和密码）。如何在 Javascript 中处理这种身份验证？什么是最佳做法？

【问题讨论】：

你的token和user&pass一样吗？

没有没有。您通过用户名和密码登录 api。登录后，您会收到一个令牌。问题在于该用户并传递数据。

如果您从 API 获取令牌，那么您不需要用户和传递来保存前端的任何位置。只需在每个请求中使用令牌来验证用户。

【参考方案1】：

登录后，您可以返回令牌并存储在 localstorage 以供将来使用和刷新，如果您不想手动将令牌放入每个 ajax 调用中，您可以添加到 $http 喜欢：

$http.defaults.headers.common['Authorization'] = 'Bearer ' + storage.token;

我已经在 angularjs 和 laravel 中尝试过这个库： https://github.com/tymondesigns/jwt-auth

【讨论】：

您所说的看起来不错，但是我如何（以及在​​哪里）进行第一次登录？这是一个大问题。

对不起，我不明白，“我第一次登录”是什么意思？你有经典的登录页面或登录表单吗？