自动登录

src/App.vue

@@ -8,13 +8,14 @@
 import { useStore } from 'vuex';
 import { computed, watch } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
+import { getUserInfo } from 'apis';
+import { message } from 'ant-design-vue';
 
 const store = useStore();
 
 const projectInfo = computed(() => store.state.projects.project); // 项目信息
 const sessionProject = sessionStorage.getItem('project'); // 项目信息缓存
 
-// 验证 获取query中u参数 获取token
 const userString = sessionStorage.getItem('user');
 const sessionToken = localStorage.getItem('token');
 
@@ -44,6 +45,7 @@ if (userString) {
 
 if (sessionToken) {
   store.commit('user/setToken', sessionToken);
+  getUser();
 }
 
 // 定时查询服务和插件
@@ -57,6 +59,17 @@ setInterval(() => {
   getPlugins();
 }, 60000);
 
+// 根据token重新获取user
+async function getUser() {
+  const token = `Bearer ${sessionToken}`;
+  try {
+    const res = await getUserInfo(token);
+    store.commit('user/setUser', res);
+  } catch (error) {
+    message.info(error || '用户信息获取失败');
+  }
+}
+
 // 获取成员列表
 function getMemberList() {
   const projectId = projectInfo.value.id;

src/apis/index.js

@@ -21,6 +21,9 @@ export const getToken = userId => http.get(`${tall}/users/userId`, { userId });
 // 根据refreshToken重新获取token
 export const getNewToken = refreshToken => http.get(`${tall}/users/refreshToken?refreshToken=${refreshToken}`);
 
+// 根据token重新获取user
+export const getUserInfo = token => http.post(`${tall}/users/token`, { token });
+
 // 登录api
 export const signIn = params => http.post(`${tall}/users/signin`, params);
 

src/store/tall/user/index.js

@@ -31,7 +31,9 @@ export default {
     setUser(state, user) {
       state.user = user;
       if (user) {
-        localStorage.setItem('token', user.token);
+        if (user.token) {
+          localStorage.setItem('token', user.token);
+        }
         sessionStorage.setItem('user', JSON.stringify(user));
       } else {
         localStorage.removeItem('token');

src/utils/axios.js

@@ -13,7 +13,7 @@ const instance = Axios.create({
 // request
 instance.interceptors.request.use(
   config => {
-    const token = store.state.user.token || sessionStorage.getItem('token');
+    const token = store.state.user.token || localStorage.getItem('token');
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
@@ -37,8 +37,8 @@ instance.interceptors.response.use(
     if (code === 200) {
       if (tokenObj.token) {
         store.commit('user/setToken', tokenObj.token);
-        sessionStorage.setItem('token', tokenObj.token);
-        sessionStorage.setItem('refreshToken', tokenObj.refreshToken);
+        localStorage.setItem('token', tokenObj.token);
+        localStorage.setItem('refreshToken', tokenObj.refreshToken);
       }
 
       return resData || 1;
@@ -48,7 +48,7 @@ instance.interceptors.response.use(
       store.commit('user/setCount', store.state.user.count - 1);
 
       // 2、刷新token
-      const refreshToken = sessionStorage.getItem('refreshToken');
+      const refreshToken = localStorage.getItem('refreshToken');
       const data = await store.dispatch('user/getTokenByRefreshToken', refreshToken);
 
       // 3、重新请求当前api
@@ -63,8 +63,8 @@ instance.interceptors.response.use(
     }
     if (code === 401) {
       // refreshToken过期
-      sessionStorage.removeItem('token');
-      sessionStorage.removeItem('refreshToken');
+      localStorage.removeItem('token');
+      localStorage.removeItem('refreshToken');
       store.commit('user/setUser', null);
       store.commit('user/setToken', '');
       message.error(msg);