下载axios
引入入axios
将axios放入Vue原型对象上
vue.prototype.$http=axios
下载element-ui
引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
设置全局axios
axios.defaults.baseURL = '这里放置URL' |
获取token
登录页面中使用this.$http.请求方法('请求路径',数据).then((response)=>{ 打印出 response 是什么东西 })
先把token存入Vuex和本地缓存中
//获取数据发送给后台,获取token保存到vuex和本地
login() {
this.$http
.post("/login", {
username: this.username,
password: this.password,
})
.then((response) => {
let { data: res } = response;
console.log(res);
//保存数据
this.$store.commit("saveInfo", res.data);
//跳转页面
this.$router.push("/home");
});
},
mutations: {
saveInfo(state, userInfo) {
state.userInfo = userInfo;
//存到本地
sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
},
delInfo(state) {
state.userInfo = "";
//清除本地存储的信息
sessionStorage.removeItem("userInfo");
}
},
获取到token Vuex 和本地都有携带token的数据存入后