登录信息保存原理
后端保存用户信息 集成redis 登入成功后,生成token,以token为key,以用户信息为value,放入redis中
前端显示登入用户 header显示登录昵称 集成VUEX+sessionStorage保存登入信息
在每个请求中加入当前user的token进行检验
如果只用vuex的话页面刷新会导致user信息失效
所以加入sessionStorage.js来保存信息,保存到客户端,防止信息丢失
index.html中引入sessionStorage.js
<script src="<%= BASE_URL %>js/session-storage.js"></script>
在store中配置状态vuex
import { createStore } from 'vuex'
declare let SessionStorage: any;
const USER = "USER";
const store = createStore({
state: {
user: SessionStorage.get(USER) || {}
},
mutations: {//对应 store.commit("setUser", data.content);这个方法
setUser (state, user) {
console.log("store user:", user);
state.user = user;
SessionStorage.set(USER, user);
}
},
actions: {
},
modules: {
}
});
界面中store的使用
import { defineComponent, ref, computed } from 'vue';
import axios from 'axios';
import { message } from 'ant-design-vue';
import store from "@/store";
// 登录后保存
const user = computed(() => store.state.user);//自动计算形式要引入组件
登入功能
// 登录
const login = () => {
console.log("开始登录");
loginModalLoading.value = true;
loginUser.value.password = hexMd5(loginUser.value.password + KEY);
axios.post('/user/login', loginUser.value).then((response) => {
loginModalLoading.value = false;
const data = response.data;
if (data.success) {
loginModalVisible.value = false;
message.success("登录成功!");
store.commit("setUser", data.content);//加入到vuex中保存状态
} else {
message.error(data.message);
}
});
};
// 退出登录
const logout = () => {
console.log("退出登录开始");
axios.get('/user/logout/' + user.value.token).then((response) => {
const data = response.data;
if (data.success) {
message.success("退出登录成功!");
store.commit("setUser", {});//设空
} else {
message.error(data.message);
}
});
};
配置前端拦截器,添加Token
/**
* axios拦截器
*/
axios.interceptors.request.use(function (config) {
console.log('请求参数:', config);
const token = store.state.user.token;
if (Tool.isNotEmpty(token)) {
config.headers.token = token;
console.log("请求headers增加token:", token);
}
return config;
}, error => {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
console.log('返回结果:', response);
return response;
}, error => {
console.log('返回错误:', error);
const response = error.response;
// const status = response.status;
// if (status === 401) {
// // 判断状态码是401 跳转到首页或登录页
// console.log("未登录,跳到首页");
// store.commit("setUser", {});
// message.error("未登录或登录超时");
// router.push('/');
// }
return Promise.reject(error);
});