"电商项目笔记.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字段中,服务端通过解析这个字段来验证用户身份。
这些知识点对于构建一个安全、高效的电商项目至关重要,它们涉及到用户认证、权限控制、数据交互等多个核心环节。理解并正确应用这些技术,能够提升项目的用户体验和安全性。