將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(會話存儲)，可以查看是否保存成功
