登录接口成功后存储token
window.sessionStorage.setItem(“token”, res.data.token);
this.$refs.loginFormRef.validate(async (valid) => {
// console.log(valid);
if (!valid) return;
// const result = await this.$http.post("login", this.loginForm);
// console.log(result);
const { data: res } = await this.$http.post("login", this.loginForm);
// console.log(res);
if (res.meta.status !== 200) return this.$message.error("失败"); //console.log("失败");
// console.log("成功");
this.$message.success("登录成功");
//将登陆成功后 token 储存本地 保持客户端里 sessionStorage
//token 只应用在当前网站打开期间生效 所以将 提肯保存在 sessionStorage中
// console.log(res);
window.sessionStorage.setItem("token", res.data.token);
//通过编程式导航跳转到后台主页,路由地址是/home
this.$router.push("/home");
});
退出登录删除token
logout() {
window.sessionStorage.clear();
this.loading = true;
setTimeout(() => {
//需要延迟的代码 :3秒后延迟跳转到首页,可以加提示什么的
this.$router.push("/Login").catch(() => {
//此处可以添加一个弹窗,例如:
});
//延迟时间:3秒
}, 3000);
},
使用 Window sessionStorage 和 localStorage 属性
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
localStorage 缓存在浏览器的数据,只有清空浏览器缓存才会删除这些数据
sessionStorage 和localStorage 的使用语法一样,这里以sessionStorage 的语法为示例
语法
window.sessionStorage
保存数据语法:
sessionStorage.setItem("key", "value");
或者
window.sessionStorage.setItem("token", res.data.token);
读取数据语法:
var lastname = sessionStorage.getItem("key");
删除指定键的数据语法:
sessionStorage.removeItem("key");
删除所有数据:
sessionStorage.clear();