vue前端对jwt的存储

jwt即对用户登录状态的一种标识，我们带着其返回的token来向后端发起请求，后端服务器根据token进行判断是否正确，过期来判断用户的状态，进而决定是否向前端发送数据。

这里记录一下前端如何对token或者其他数据进行存储。

sessionStorage

属于本地存储，浏览器关闭后便失效。

// 数据的保存
sessionStorage.id = id
sessionStorage.token = token

// 数据的读取访问
sessionStorage.token

// 清除所有记录
sessionStorage.clear()
// 清除单个记录
sessionStorage.removeItem("token");

localStorage

属于本地存储，长期有效，浏览器关闭之后也有效。

用法与上面类似

// 数据的保存
localStorage.id = id
localStorage.token = token

// 数据的读取访问
localStorage.token

// 清楚所有记录
localStorage.clear()

// 清除单个记录
localStorage.removeItem("token");

简单例子

界面中的逻辑处理代码

export default {
  name: "signIn",
  methods: {
    SignIn() {
      var name = document.getElementById("name").value;
      var pwd = document.getElementById("pwd").value;

      console.log(name);
      console.log(pwd);
      const params = {
        username: name,
        password: pwd,
      }
		// 这里没有处理密码错误
      SignInM(params).then(res => {
        localStorage.username = name;
        localStorage.password = pwd;
        localStorage.token = res.data;
      });
    }
  }
}

与后端交互的代码

export function SignInM(params) {
    return request({
        url: 'login/register/',
        method: 'post',
        params: params
    })
}