整好了登录后自动跳转到Profile页面的功能。修复了登录时后端传来的字段没对上的问题

This commit is contained in:
高子兴 2024-07-01 21:01:17 +08:00
parent 1ba1744698
commit 66352ed3c9
2 changed files with 31 additions and 21 deletions

View File

@ -1,19 +1,16 @@
import axios from 'axios'; import axios from 'axios';
const state = { const state = {
user: null,
isAuthenticated: false, isAuthenticated: false,
token: null, token: null,
}; };
const mutations = { const mutations = {
setUser(state, {user, token}) { setUser(state, {token}) {
state.user = user;
state.isAuthenticated = true; state.isAuthenticated = true;
state.token = token; state.token = token;
}, },
clearUser(state) { clearUser(state) {
state.user = null;
state.isAuthenticated = false; state.isAuthenticated = false;
state.token = null; state.token = null;
}, },
@ -23,20 +20,13 @@ const actions = {
async login({commit}, credentials) { async login({commit}, credentials) {
const response = await axios.post('/api/login', credentials); const response = await axios.post('/api/login', credentials);
if (response.status === 200) { if (response.status === 200) {
commit('setUser', {user: response.data.username, token: response.data.token}); commit('setUser', {token: response.data.token});
} }
return response; return response;
}, },
logout({commit}) { logout({commit}) {
commit('clearUser'); commit('clearUser');
}, },
async fetchUserProfile({commit}) {
const response = await axios.get('/api/user-profile');
if (response.status === 200) {
commit('setUser', {user: response.data});
}
return response;
},
}; };
const getters = { const getters = {

View File

@ -2,8 +2,12 @@
import {onMounted, ref} from 'vue'; import {onMounted, ref} from 'vue';
import 'element-plus/dist/index.css'; import 'element-plus/dist/index.css';
import {useStore} from 'vuex'; import {useStore} from 'vuex';
import axios from "axios";
import {ElMessage} from "element-plus";
import { useRouter } from 'vue-router';
const store = useStore(); const store = useStore();
const router = useRouter();
const nickname = ref(''); const nickname = ref('');
const phoneNumber = ref(''); const phoneNumber = ref('');
@ -13,7 +17,17 @@ const role = ref('');
const createdAt = ref(''); const createdAt = ref('');
onMounted(async () => { onMounted(async () => {
const response = await store.dispatch('authentication/fetchUserProfile'); try {
// VuexJWT token
const token = store.getters['authentication/token'];
if (!token) {
store.commit('authentication/logout');
router.push('/login');
}
// token
const response = await axios.get(`/api/userProfile?token=${token}`);
if (response.status === 200) { if (response.status === 200) {
const user = response.data; const user = response.data;
nickname.value = user.nickname; nickname.value = user.nickname;
@ -22,6 +36,12 @@ onMounted(async () => {
department.value = user.department; department.value = user.department;
role.value = user.role; role.value = user.role;
createdAt.value = user.createdAt; createdAt.value = user.createdAt;
} else {
ElMessage.error("获取用户信息失败,请重试");
}
} catch (error) {
console.error('Error fetching user profile:', error);
ElMessage.error("获取用户信息失败,请重试");
} }
}); });
</script> </script>