(vue前端)用戶登錄和退出操作的實現


image-20220418221824758

准備工作

先安裝插件

npm install js-cookie

在相關頁面引用插件的方式:

import cookie from 'js-cookie'

該插件目的於操作cookie,我們需要將token和用戶信息放入cookie里,還要從cookie中讀取token用於攔截器

創建攔截器

image-20220418223519521

看到我們寫調用接口的函數時常用的request文件了嗎?我們就在這個js文件中配置攔截器,意思是對所有請求攔截。

詳見以下代碼中的最后一個函數:每次請求都從cookie中獲取token,把它放入header中

這段代碼要在寫在 export default xxx 前面,xxx這里是service對象

image-20220418235040724

實現用戶登錄方法

用戶發出登錄請求,我們在吧token放入cookie后,再根據token獲取用戶的信息,然后把用戶的信息放入cookie中,最后再跳轉頁面。

給出這部分的實現代碼,供參考:

  1. 給出代碼中,通過token獲取用戶信息這一函數(loginApi.getUserinfoByToken()),后端接口的參數應是HttpServletRequest類型的,因為我們先前已經將token放入header了,這方面是springMVC的知識
  2. 最后的跳轉頁面有多種寫法,也可以用vue的路由跳轉

image-20220418233917391

獲取用戶信息時要注意的

使用cookie.get('xxx')獲取用戶信息時,得到的數據雖然是json的形式,但不是json的結構,它只是一個字符串。

需要注意將字符串轉換為json對象

image-20220418235826888

退出登錄的操作

清空cookie然后跳轉即可

image-20220419001254121


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM