DEV Community
·
前后端设置中的注意事项🛠 - MERN栈
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
本文介绍了如何在本地设置前后端连接，包括代理配置、CORS解决跨域问题、使用Axios进行数据请求，以及通过jsonwebtoken实现用户认证，从而安全管理用户登录和受保护路由的访问。
🎯
关键要点
-
在本地设置前后端连接需要配置代理和CORS。
-
使用Axios进行数据请求，Axios可以自动将JSON响应转换为JS对象。
-
在登录组件中使用Axios进行用户认证，并将token存储在localStorage中。
-
使用jsonwebtoken实现用户认证，确保用户访问受保护的路由。
-
创建utils/auth.js文件来生成和验证token，确保安全的用户认证。
-
通过protected routes格式来保护用户的活动数据，确保每个用户的活动是私密的。
-
在登出时移除token，并重定向到登录页面。
❓
延伸问答
如何在本地设置前后端连接？
需要配置代理和CORS，代理在package.json中设置，CORS通过app.use(cors())来处理。
Axios在前端请求数据时有什么优势？
Axios可以自动将JSON响应转换为JS对象，简化代码流程。
如何实现用户认证并管理登录状态？
使用jsonwebtoken生成token，并在localStorage中存储，确保用户访问受保护的路由。
如何保护用户的活动数据？
通过设置受保护的路由，确保每个用户的活动数据是私密的，只有持有有效token的用户可以访问。
在登出时应该做什么？
在登出时需要移除localStorage中的token，并重定向到登录页面。
如何使用jsonwebtoken进行用户认证？
在后端创建utils/auth.js文件，使用jsonwebtoken生成和验证token，确保用户身份的安全性。
➡️
