feat: 请求携带token&store结构改造

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "mock": "node mock/index.js"

src/router/index.ts

@@ -1,4 +1,4 @@
-import { isUserLoggedIn } from '@/utils/userStatus';
+import { useStore } from 'vuex';
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import { HOME, LOGIN, PROJECT } from './name';
 
@@ -11,6 +11,8 @@ const AuthWrapper = (routeRecord: RouteRecordRaw) => {
   };
 };
 
+const store = useStore();
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -71,7 +73,7 @@ router.beforeEach((to, from, next) => {
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     // this route requires auth, check if logged in
     // if not, redirect to login page.
-    if (!isUserLoggedIn()) {
+    if (store.state.token === '') {
       next({
         name: LOGIN,
         query: { redirect: to.fullPath },
@@ -85,14 +87,7 @@ router.beforeEach((to, from, next) => {
 });
 
 router.beforeEach((to, from, next) => {
-  if (to.name === LOGIN) {
-    if (isUserLoggedIn()) {
-      // eslint-disable-next-line no-alert
-      alert('you\'ve logged in');
-    } else {
-      next();
-    }
-  } else {
+  if (to.name === LOGIN && store.state.token === '') {
     next();
   }
 });

src/store/index.ts

@@ -1,21 +1,45 @@
+import { destoryToken, saveToken } from '@/utils/token';
 import { createStore } from 'vuex';
+import { useRouter } from 'vue-router';
 
-export default createStore({
+import {
+  ChangeGroupPayload, ChangeProjectPayload, RootState, TokenPayload,
+} from './typings';
+
+export default createStore<RootState>({
   state: {
-    projectList: [{ name: '项目一', description: 'asd', id: 0 },
-      { name: '项目二', description: 'asd', id: 1 },
-      { name: '项目三', description: 'asd', id: 2 },
-      { name: '长项目名12312312312123123312', description: 'asd', id: 3 },
-      { name: '项目一', description: 'asd', id: 4 },
-      { name: '项目二', description: 'asd', id: 5 },
-      { name: '项目三', description: 'asd', id: 6 },
-      { name: '长项目名12312312312123123312', description: 'asd', id: 7 }],
+    currentGroup: -1,
+    currentProject: -1,
+    token: localStorage.getItem('token') || '',
   },
   mutations: {
-    refreshProjectList(state) {
-      state.projectList = [{ name: '项目一', description: 'asd', id: 0 },
-        { name: '项目二', description: 'asd', id: 1 },
-        { name: '项目三', description: 'asd', id: 2 }];
+    changeGroup(state, { groupId }: ChangeGroupPayload) {
+      state.currentGroup = groupId;
+    },
+    changeProject(state, { projectId }: ChangeProjectPayload) {
+      state.currentProject = projectId;
+    },
+    updateToken(state, { token }: TokenPayload) {
+      state.token = token;
+    },
+  },
+  actions: {
+    changeGroup({ commit }, payload: ChangeGroupPayload) {
+      commit('changeGroup', payload);
+    },
+    changeProject({ commit }, payload: ChangeProjectPayload) {
+      commit('changeProject', payload);
+    },
+    updateToken({ commit }, payload: TokenPayload) {
+      commit('updateToken', payload);
+      saveToken(payload.token);
+    },
+    destoryToken({ commit }) {
+      commit('updateToken', {
+        token: '',
+      } as TokenPayload);
+      destoryToken();
+      useRouter().push('/home');
     },
   },
 });

src/utils/axios.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import axios from 'axios';
+import { destroyToken } from '@/store/dispatchers';
 
 // Full config:  https://github.com/axios/axios#request-config
 // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
@@ -26,9 +27,10 @@ const config = {
 const _axios = axios.create(config);
 
 _axios.interceptors.request.use(
-  (config) =>
-    // Do something before request is sent
-    config,
+  (config) => {
+    config.headers.Authorization = localStorage.getItem('token');
+    return config;
+  },
   (error) =>
     // Do something with request error
     Promise.reject(error),
@@ -36,9 +38,13 @@ _axios.interceptors.request.use(
 
 // Add a response interceptor
 _axios.interceptors.response.use(
-  (response) =>
-    // Do something with response data
-    response.data.message,
+  (response) => {
+    if (response.data.code === 10110) {
+      destroyToken();
+      return;
+    }
+    return response.data.message;
+  },
   (error) =>
     // Do something with response error
     Promise.reject(error),

src/utils/userStatus.ts

@@ -1,4 +0,0 @@
-export const isUserLoggedIn = () => {
-  const userStatus = JSON.parse(localStorage.getItem('user') || '{}');
-  return userStatus.login;
-};

src/views/Home.vue

@@ -18,6 +18,8 @@
 import { computed, defineComponent } from 'vue';
 import ProjectCard from '@/components/ProjectCard.vue';
 import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import { updateToken } from '@/store/dispatchers';
 
 export default defineComponent({
   components: {
@@ -25,6 +27,11 @@ export default defineComponent({
   },
   setup() {
     const store = useStore();
+    const route = useRoute();
+    const token = (route.query.id_token || null) as (string | null);
+    if (token) {
+      updateToken(token);
+    }
     return {
       projectList: computed(() => store.state.projectList),
     };

src/views/Login.vue

@@ -11,8 +11,8 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   methods: {
     async login() {
-      window.location = `http://p.seecoder.cn/api/interaction?scope=openid&client_id=seec-devcloud&redirect_uri=${encodeURI(
-        `http://${window.location.host}/api/auth/receive`,
+      window.location = `http://p.seecoder.cn/api/interaction?scope=openid&client_id=seec-seec&redirect_uri=${encodeURI(
+        `http://${window.location.host}/`,
       )}` as unknown as Location;
     },
   },