客户端保存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(会话存储)，可以查看是否保存成功