Axios token的获取

在Web开发中，token（令牌）可以存储在多个地方，包括cookie、sessionStorage和localStorage。每种存储方式都有其优点和缺点，选择哪种方式取决于你的应用需求。

1. Cookie

将token存储在cookie中是一种常见的做法。这种方式的优点是，即使在浏览器关闭后，cookie仍然存在，因此用户可以保持登录状态。然而，cookie的缺点是容易受到CSRF（跨站请求伪造）攻击。

2. SessionStorage

将token存储在sessionStorage中的优点是，它只在当前会话中存在，当用户关闭浏览器后，sessionStorage中的数据将被清除。这种方式的缺点是，如果用户在浏览器中打开新的标签页或窗口，那么新的页面将无法访问sessionStorage中的数据。

3. LocalStorage

将token存储在localStorage中的优点是，即使在浏览器关闭后，localStorage中的数据仍然存在，因此用户可以保持登录状态。此外，localStorage中的数据可以在同一浏览器的所有标签页和窗口中共享。然而，localStorage的缺点是容易受到XSS（跨站脚本）攻击。

总的来说，将token存储在哪里取决于你的应用需求。如果你的应用需要在用户关闭浏览器后保持登录状态，那么你可以选择将token存储在cookie或localStorage中。如果你的应用需要在用户关闭浏览器后清除token，那么你可以选择将token存储在sessionStorage中。


// 存储token
document.cookie = "token=your_token";  // 存储在cookie
sessionStorage.setItem("token", "your_token");  // 存储在sessionStorage
localStorage.setItem("token", "your_token");  // 存储在localStorage

localStorage.setItem("token", ret.data.access_token); //存到本地localStorage
sessionStorage.setItem("token", ret.data.access_token); //存到sessionStorage
document.cookie = `token=${ret.data.access_token}`; //存到cookie
 
// 获取token
var tokenFromCookie = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*\=\s*([^;]*).*$)|^.*$/, "$1");  // 从cookie获取
var tokenFromSessionStorage = sessionStorage.getItem("token");  // 从sessionStorage获取
var tokenFromLocalStorage = localStorage.getItem("token");  // 从localStorage获取


const token = localStorage.getItem("token");//localStorage获取token
const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*\=\s*([^;]*).*$)|^.*$/, "$1");//cookie获取token
const token = sessionStorage.getItem("token");  // 从sessionStorage获取

示例：

 login() {
      let params = new URLSearchParams();
      params.append("username", this.username);
      params.append("password", this.password);
      axios
        .post(`http://49.235.107.169:5000/api/v1/user_login`, params, {
          headers: {
            Accept: "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((ret) => {
          console.log(ret.request.status);
          if (ret.request.status != 200) {
            console.log(`账号或密码错误`);
            alert("账号或密码错误");
          } else {
            localStorage.setItem("token", ret.data.access_token);

            console.log(ret.data.access_token);
            // this.$router.push("/work");
            this.$router.push("/view");
          }
        });
    },

URLSearchParams.append（）

append（）是 URLSearchParams 接口的一个方法。可以插入一个新搜索参数。

用法：URLSearchParams.append(name, value)

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));
//添加第二个 foo 搜索参数。
params.append("foo", 4);
//查询字符串变成：'foo=1&bar=2&foo=4'
//还是不懂，为啥这个能插入

Axios token的获取

评论区

Axios token的获取