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