主动介入token的操作

最新推荐文章于 2024-06-07 23:26:45 发布

始终坚持在保安岗位

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量404

点赞数 4

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_51391923/article/details/137538704

版权

1.在拦截器中进行修改

const timeKey = 'hrsaas-timestamp-key' // 设置一个独一无二的key

// 获取时间戳
export function getTimeStamp() {
  return Cookies.get(timeKey)
}
// 设置时间戳
export function setTimeStamp() {
  Cookies.set(timeKey, Date.now())
}
import router from '@/router'
import { Message } from 'element-ui'
import { getTimeStamp } from '@/utils/auth'
const TimeOut = 3600 // 定义超时时间vv


// 请求拦截器
service.interceptors.request.use(config => {
  // config 是请求的配置信息
  // 注入token
  if (store.getters.token) {
    // 只有在有token的情况下 才有必要去检查时间戳是否超时
    if (IsCheckTimeOut()) {
      // 如果它为true表示 过期了
      // token没用了 因为超时了
      store.dispatch('user/logout') // 登出操作
      // 跳转到登录页
      router.push('/login')
      return Promise.reject(new Error('token超时了'))
    }
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config // 必须要返回的
}, error => {
  return Promise.reject(error)
})

/ 是否超时
// 超时逻辑  (当前时间  - 缓存中的时间) 是否大于 时间差
function IsCheckTimeOut() {
  var currentTime = Date.now() // 当前时间戳
  var timeStamp = getTimeStamp() // 缓存时间戳
  return (currentTime - timeStamp) / 1000 > TimeOut
}
在获取token的时候  把当前的最新时间写入缓存中

2. 使用 Axios 进行 HTTP 请求

获取 Token： 用户在登录时，通常会提供用户名和密码，通过向服务器发送登录请求，服务器验证用户身份后，会返回一个包含 token 的响应。

存储 Token： 前端通常会将 token 存储在客户端，可以使用浏览器提供的 localStorage 或 sessionStorage 进行存储。存储 token 的目的是为了在用户访问需要权限的页面时，能够提供有效的身份认证。

发送 Token 到服务器： 在每次向服务器发送请求时，需要在请求头中包含 token。可以通过拦截器或者在每次请求前手动设置请求头的方式实现。服务器收到请求后会验证 token 的有效性，并根据权限进行相应的处理。

Token 的更新与失效处理： token 通常有一个过期时间，一旦过期，就需要重新获取新的 token。可以在前端定时检查 token 是否过期，或者在服务器端返回特定的响应码来通知前端 token 过期。在 token 失效时，需要引导用户重新进行登录，获取新的 token。

import axios from 'axios';

// 登录，获取 token
function login(username, password) {
  return axios.post('/login', { username, password })
    .then(response => {
      const token = response.data.token;
      // 将 token 存储在 localStorage 中
      localStorage.setItem('token', token);
      return token;
    });
}

// 发送请求时，在请求头中包含 token
function sendRequestWithToken(url, method, data) {
  const token = localStorage.getItem('token');
  return axios({
    method: method,
    url: url,
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    },
    data: data
  });
}

// 检查 token 是否过期
function checkTokenExpiration() {
  const token = localStorage.getItem('token');
  // 检查 token 是否存在且未过期
  if (token && !isTokenExpired(token)) {
    return true;
  } else {
    return false;
  }
}

// 判断 token 是否过期
function isTokenExpired(token) {
  // 这里可以根据 token 的具体格式来判断是否过期，示例代码中假设 token 包含过期时间 exp
  const expiration = getTokenExpiration(token);
  return expiration < Date.now() / 1000;
}

// 获取 token 的过期时间
function getTokenExpiration(token) {
  // 假设 token 包含过期时间字段 exp
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp;
}

// 在需要的地方调用登录函数进行登录，并在登录成功后发送带 token 的请求
login('username', 'password')
  .then(() => {
    sendRequestWithToken('/api/data', 'GET')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  });

总结：

1.用户认证和授权：

认证（Authentication）： 确认用户的身份是否有效，通常通过用户名和密码、第三方身份提供者（如 Google、Facebook）或其他方式进行。
授权（Authorization）： 确定用户是否有权访问特定资源或执行特定操作。这通常涉及到对用户角色、权限或组的管理。

2. 安全性考虑

CSRF（Cross-Site Request Forgery）防护： 确保你的应用程序能够有效地防范 CSRF 攻击，这通常涉及到在每个请求中包含一个随机生成的 token，并在服务器端验证该 token 的有效性。
XSS（Cross-Site Scripting）防护： 避免将用户提供的内容直接插入到页面中，以防止 XSS 攻击。

3.持久化存储