具體流程
准備工作
安裝js-cookie插件把用戶信息放進cookie
npm install js-cookie
引入cookie
import cookie from 'js-cookie'
代碼實現
//登錄的方法
submitLogin() {
//第一步 調用接口進行登錄，返回token字符串
loginApi.submitLoginUser(this.user)
.then(response => {
//第二步 獲取token字符串放到cookie里面
//第一個參數cookie名稱，第二個參數值，第三個參數作用范圍
cookie.set('guli_token',response.data.data.token,{domain: 'localhost'})
//第三步 在全局請求中設置request 攔截器...
//第四步 調用接口 根據token獲取用戶信息，為了首頁面顯示
loginApi.getLoginUserInfo()
.then(response => {
this.loginInfo = response.data.data.userInfo
//獲取返回用戶信息，放到cookie里面
cookie.set('guli_ucenter',this.loginInfo,{domain: 'localhost'})
//跳轉頁面
window.location.href = "/";
})
})
}
// 第三步.http request 攔截器（寫在封裝axios請求中）
service.interceptors.request.use(
config => {
//debugger
if (cookie.get('guli_token')) {
config.headers['token'] = cookie.get('guli_token');
}
return config
},
err => {
return Promise.reject(err);
})
在數據顯示界面取出cookie
方法
showInfo(){
var userStr=cookie.get('guli_ucenter')
if(userStr){
this.loginInfo=JSON.parse(userStr)//cookie中得到的都是字符串，需要轉化
}
退出方法
logout(){
cookie.set('guli_token','',{domain: 'localhost'})
cookie.set('guli_ucenter','',{domain: 'localhost'})
window.location.href="/"
}