具体流程
准备工作
安装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="/"
}