"电商项目笔记.md"
本笔记主要涵盖了电商项目中关于JWT认证流程、Promise的使用、客户端存储token、路由守卫实现权限控制、退出功能的处理以及如何将token发送到服务端等关键知识点。
#### 1. JWT的认证流程与Token原理分析
JWT（JSON Web Token）是一种轻量级的身份验证机制，它允许客户端通过携带令牌（token）在不同的服务器之间安全地传递信息。当用户在客户端提交用户名和密码后，服务器验证成功会返回一个JWT token。客户端将这个token存储在浏览器的sessionStorage或localStorage中。在后续的请求中，客户端会在请求头中附带这个token，服务端验证token的有效性，若验证通过则允许访问受保护的接口。相比传统的基于session_id的认证方式，JWT更适合于服务器集群和跨域场景，因为它不需要在服务器端存储用户状态。
#### 2. 使用async/await处理Promise
在进行异步操作，如API调用时，post方法通常返回一个Promise对象。为了简化异步代码，可以使用async/await语法。这样可以让代码看起来更接近同步逻辑，提高可读性。例如：
```javascript
async function postData() {
try {
const response = await axios.post('/api/data', { payload });
// 处理响应
} catch (error) {
// 处理错误
}
}
```
#### 3. 客户端存储Token数据
在电商项目中，通常选择将token存储在sessionStorage中，因为它仅在当前浏览器窗口（Tab）内有效，关闭窗口后数据将被清除。这为用户提供了相对安全的环境，因为一旦用户关闭浏览器，token信息不会持久化保存。相比于localStorage，sessionStorage更适合作为短期存储，防止恶意第三方获取长期有效的token。
#### 4. 路由守卫实现页面访问权限控制
在Vue.js中，可以利用Vue Router的导航守卫功能来控制页面访问权限。通过在全局、路由或组件级别设置beforeEach函数，可以拦截并控制路由跳转。例如：
```javascript
router.beforeEach((to, from, next) => {
if (!getToken()) {
next('/login');
} else {
next();
}
});
```
这里的getToken()函数用于从sessionStorage中获取token，如果没有获取到，用户将被重定向至登录页面。
#### 5. 退出功能的实现
退出登录时，应清除存储在sessionStorage中的token，以断开用户的登录状态。这可以通过调用`window.sessionStorage.clear()`来实现。接着，使用编程式导航将用户重定向至登录页面，例如：
```javascript
methods: {
logout() {
window.sessionStorage.clear();
this.$router.push('/login');
},
}
```
#### 6. 将Token数据发送到服务端
在HTTP请求中，通常将token放在请求头的Authorization字段中，以Bearer Token的形式传递，如：
```javascript
axios.get('/api/resource', {
headers: {
'Authorization': 'Bearer ' + getToken(),
},
});
```
这里的getToken()函数用于从sessionStorage中获取token，将其附加在Authorization字段中，服务端通过解析这个字段来验证用户身份。
这些知识点对于构建一个安全、高效的电商项目至关重要，它们涉及到用户认证、权限控制、数据交互等多个核心环节。理解并正确应用这些技术，能够提升项目的用户体验和安全性。
我的内容管理
展开
