客户端保存token到sessionStorage


将token保存到客户端的sessionStorage

一、区分localStorage和sessionStorage

localStorage是本地持久化存储
sessionStorage是浏览器会话期间存储

二、为什么要保存token

2.1 原因是:项目中除了登录之外的其他API接口,必须在登录之后才能访问;

2.2另外:token只应在当前网页打开期间生效,所以将token保存在sessionStorage中

三、保存

在登录接口中
window.sessionStorage.setItem("token",res.data.token);
//保存成功后,通过编程式导航跳转到后台主页,路由地址是/home
this.$router.push("/home");//跳转到home.vue

四、新增home.vue页面

4.1 在组件目录下面新建

Home.vue页面,并编辑3部分内容


Home 组件

4.2 配置路由规则

1、先引入home组件
import Home from '../components/Home'
2、配置home路由
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home
}
]

4.3 测试

打开浏览器的抓包面板,在便签页Application下面有Session Storage(会话存储),可以查看是否保存成功
image


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。