token机制

最新推荐文章于 2024-08-18 16:52:32 发布

weixin_49115633

最新推荐文章于 2024-08-18 16:52:32 发布

阅读量381

点赞数 5

文章标签：服务器前端运维

本文链接：https://blog.csdn.net/weixin_49115633/article/details/135561080

版权

本文探讨了Token机制相对于Cookie/Session机制的优势，包括无状态、安全性、兼容性和细粒度控制，并在移动应用中的适用性。同时，提供了使用axios在请求中添加Token的示例代码。

摘要由CSDN通过智能技术生成

一、token机制、cookie/session机制对比

Token机制和Cookie/Session机制都是用于维持用户状态的方式，但是Token机制有几个优点，使其在一些场景中比Cookie/Session机制更适合使用：

无状态、可扩展性：Token本身包含了所有处理请求所需的信息，服务器不需要维护Session状态，这就使得应用变得容易扩展。
安全性：Token基于Http Header，避免了CSRF攻击。
兼容性：它不依赖于Cookie，更适合于在移动应用中使用。
细粒度控制：通过在Token中包含更多的会话信息，可以实现更细粒度的权限和访问控制。
支持跨程序调用：基于Token的身份验证方案往往比基于Cookie的方案更适合用于跨程序调用（API）的身份验证。

然而，Token机制并不是完全取代Cookie/Session机制的，两者有各自的适用场景，需要根据具体的项目需求来选择使用。

二、针对上面第3条的解释

移动应用确实可以使用Cookies，但是相对于Web应用，移动应用使用Cookie进行用户身份验证的情况较少。

兼容性和一致性：由于各种移动设备和操作系统的差异，Cookie的处理可能存在一些兼容性问题。例如，某些设备可能会限制Cookies的使用，或者Cookies在某些场景（如后台刷新、杀死应用等）下可能无法持久化。
安全性： Cookie在传输过程中容易被劫持，增加了信息泄露的风险。尽管可以通过设置Secure flag让Cookie仅在HTTPS连接下传输，但这个过程可能相比Token机制更复杂，且在移动设备上不一定总可以保证HTTPS连接。
跨域问题：移动应用通常需要通过API从不同的服务器获取数据，对于跨域请求，Cookie并不是一个理想的解决方案，而使用Token就不存在这个问题。
开发和维护复杂性：移动应用需要在客户端和服务器端同时处理Cookie，增加了开发和维护的复杂性。

因此，虽然理论上移动应用中可以使用Cookies，但基于上述的原因，很多移动应用更倾向于选择使用基于Token的认证机制。

三、服务器给不同的客户端发送token ,当一个客户端携带token请求服务端时候，服务端如何区分对应的客户端信息。

服务器在给不同客户端发送Token时，通常会基于用户登录信息（如用户名和密码）的验证来生成这些Token。这些Token是唯一的，并且与对应的用户数据有关联。
当一个客户端（用户）在后续的请求中发送这个Token，服务器可以取出Token，并解析出来，然后根据解析出的信息（例如用户ID）来查找对应的用户信息。

四、axios配置拦截器使用token 的demo

import axios from 'axios';

// 创建 axios 实例
const service = axios.create({
  baseURL: 'http://api.example.com', 
  timeout: 5000 
})

// request 拦截器，在请求发送前执行
service.interceptors.request.use(
  config => {
    // 这里可以自定义一些config 配置 
    const token = localStorage.getItem('token'); // 从存储中获取token
    if (token) {
      // 如果token存在，则附加到请求的headers中
      config.headers['Authorization'] = 'Bearer ' + token;
    }
    
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); 
    Promise.reject(error)
  }
)

// respone 拦截器，在请求返回后执行
service.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        console.log('err' + error); 
        return Promise.reject(error);
    }
)

export default service