准備工作
先安裝插件
npm install js-cookie
在相關頁面引用插件的方式:
import cookie from 'js-cookie'
該插件目的於操作cookie,我們需要將token和用戶信息放入cookie里,還要從cookie中讀取token用於攔截器
創建攔截器
看到我們寫調用接口的函數時常用的request
文件了嗎?我們就在這個js文件中配置攔截器,意思是對所有請求攔截。
詳見以下代碼中的最后一個函數:每次請求都從cookie中獲取token,把它放入header中
這段代碼要在寫在
export default xxx
前面,xxx這里是service
對象
實現用戶登錄方法
用戶發出登錄請求,我們在吧token放入cookie后,再根據token獲取用戶的信息,然后把用戶的信息放入cookie中,最后再跳轉頁面。
給出這部分的實現代碼,供參考:
- 給出代碼中,通過token獲取用戶信息這一函數(
loginApi.getUserinfoByToken()
),后端接口的參數應是HttpServletRequest
類型的,因為我們先前已經將token放入header了,這方面是springMVC的知識- 最后的跳轉頁面有多種寫法,也可以用vue的路由跳轉
獲取用戶信息時要注意的
使用cookie.get('xxx')
獲取用戶信息時,得到的數據雖然是json的形式,但不是json的結構,它只是一個字符串。
需要注意將字符串轉換為json對象
退出登錄的操作
清空cookie然后跳轉即可