Token無効の際再ログイン対応

frontend/src/boot/axios.ts

@@ -1,5 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import axios, { AxiosInstance } from 'axios';
+import {router} from 'src/router';
 
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
@@ -15,7 +16,23 @@ declare module '@vue/runtime-core' {
 // "export default () => {}" function below (which runs individually
 // for each client)
 const api:AxiosInstance = axios.create({ baseURL: process.env.KAB_BACKEND_URL });
-
+const token=localStorage.getItem('token')||'';
+if(token!==''){
+  api.defaults.headers["Authorization"]='Bearer ' + token;
+}
+api.interceptors.response.use(
+  (response)=>response,
+  (error)=>{
+    const orgReq=error.config;
+    if(error.response && error.response.status===401){
+      localStorage.removeItem('token');
+      router.replace({
+        path:"/login",
+        query:{redirect:router.currentRoute.value.fullPath}
+      });
+    }
+  }
+)
 export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
 

frontend/src/components/AppSelect.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="q-pa-md">
-    <q-table :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
+      <template v-slot:body-cell-description="props">
+          <q-td :props="props">
+              <q-scroll-area  class="description-cell">
+                <div v-html="props.row.description" ></div>
+              </q-scroll-area>
+          </q-td>
+      </template>
+    </q-table>
   </div>
 </template>
-<script>
+<script >
 import { ref,onMounted,reactive } from 'vue'
 import { api } from 'boot/axios';
+import { LeftDataBus } from './flowEditor/left/DataBus';
 
 export default {
   name: 'AppSelect',
@@ -15,27 +24,51 @@ export default {
   },
   setup() {
   const columns = [
-  { name: 'id', required: true,label: 'アプリID',align: 'left',field: 'id',sortable: true},
+  { name: 'id', required: true,label: 'ID',align: 'left',field: 'id',sortable: true},
-  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
+  { name: 'name', label: 'アプリ名', field: 'name', sortable: true,align:'left' },
-  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
+  { name: 'description', label: '概要', field: 'description',align:'left', sortable: false },
-  { name: 'createdate', label: '作成日時', field: 'createdate' }
+  { name: 'createdate', label: '作成日時', field: 'createdate',align:'left'}
   ]
   const rows = reactive([])
     onMounted( () => {
         api.get('api/v1/allapps').then(res =>{
-         res.data.apps.forEach((item) =>
+          res.data.apps.forEach((item) =>
-        {
+              {
-          rows.push({id:item.appId,name:item.name,creator:item.creator.name,createdate:item.createdAt});
+                rows.push({
-        }
+                  id:item.appId,
-        )
+                  name:item.name,
-      });
+                  description:item.description,
+                  createdate:dateFormat(item.createdAt)});
+              }
+            )
+        });
       });
+
+    const dateFormat=(dateStr)=>{
+      const date = new Date(dateStr);
+      const pad = (num) => num.toString().padStart(2, '0');
+      const year = date.getFullYear();
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+      const hours = pad(date.getHours());
+      const minutes = pad(date.getMinutes());
+      const seconds = pad(date.getSeconds());
+      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+    }
     return {
       columns,
       rows,
-      selected: ref([]),
+      selected: ref([])
     }
   },
 
 }
 </script>
+<style lang="scss">
+.description-cell{
+  height: 60px;
+  width: 300px;
+  max-height: 60px;
+  max-width: 300px;
+}
+</style>

frontend/src/components/FieldSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <q-table :title="name+'一覧'"  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table   row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
   </div>
 </template>
 <script>

frontend/src/router/index.ts

@@ -17,57 +17,60 @@ import { useAuthStore } from 'stores/useAuthStore';
  * with the Router instance.
  */
 
-// export default route(function (/* { store, ssrContext } */) {
-//   const createHistory = process.env.SERVER
-//     ? createMemoryHistory
-//     : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
-
-//   const Router = createRouter({
-//     scrollBehavior: () => ({ left: 0, top: 0 }),
-//     routes,
-
-//     // Leave this as is and make changes in quasar.conf.js instead!
-//     // quasar.conf.js -> build -> vueRouterMode
-//     // quasar.conf.js -> build -> publicPath
-//     history: createHistory(process.env.VUE_ROUTER_BASE),
-//   });
-
-//   return Router;
-// });
-
-
-
 const createHistory = process.env.SERVER
-     ? createMemoryHistory
+? createMemoryHistory
-     : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
+: (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
 
-export const Router = createRouter({
+const routerInstance = createRouter({
-      scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: () => ({ left: 0, top: 0 }),
-      routes,
+  routes,
 
-      // Leave this as is and make changes in quasar.conf.js instead!
+  // Leave this as is and make changes in quasar.conf.js instead!
-      // quasar.conf.js -> build -> vueRouterMode
+  // quasar.conf.js -> build -> vueRouterMode
-      // quasar.conf.js -> build -> publicPath
+  // quasar.conf.js -> build -> publicPath
-      history: createHistory(process.env.VUE_ROUTER_BASE),
+  history: createHistory(process.env.VUE_ROUTER_BASE),
-    });
-
-export default route(function (/* { store, ssrContext } */) {
-     return Router;
-    });
-
-Router.beforeEach(async (to) => {
-    // clear alert on route change
-    //const alertStore = useAlertStore();
-    //alertStore.clear();
-
-    // redirect to login page if not logged in and trying to access a restricted page
-    const publicPages = ['/login'];
-    const authRequired = !publicPages.includes(to.path);
-    const authStore = useAuthStore();
-
-    if (authRequired && !authStore.token) {
-        authStore.returnUrl = to.fullPath;
-        return '/login';
-    }
 });
 
+export default route(function (/* { store, ssrContext } */) {
+
+  routerInstance.beforeEach(async (to) => {
+      // clear alert on route change
+      //const alertStore = useAlertStore();
+      //alertStore.clear();
+
+      // redirect to login page if not logged in and trying to access a restricted page
+      const publicPages = ['/login'];
+      const authRequired = !publicPages.includes(to.path);
+      const authStore = useAuthStore();
+
+      if (authRequired && !authStore.token) {
+          authStore.returnUrl = to.fullPath;
+          return '/login';
+      }
+  });
+  return routerInstance;
+});
+
+export const router = routerInstance;
+
+
+// const createHistory = process.env.SERVER
+//      ? createMemoryHistory
+//      : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
+
+// export const Router = createRouter({
+//       scrollBehavior: () => ({ left: 0, top: 0 }),
+//       routes,
+
+//       // Leave this as is and make changes in quasar.conf.js instead!
+//       // quasar.conf.js -> build -> vueRouterMode
+//       // quasar.conf.js -> build -> publicPath
+//       history: createHistory(process.env.VUE_ROUTER_BASE),
+//     });
+
+// export default route(function (/* { store, ssrContext } */) {
+//      return Router;
+//     });
+
+
+

frontend/src/stores/useAuthStore.ts

@@ -1,8 +1,9 @@
 import { defineStore } from 'pinia';
 import { api } from 'boot/axios';
-import  { Router }  from '../router';
+
 import {IDomainInfo} from '../types/ActionTypes';
 
+
 export interface IUserState{
   token?:string;
   returnUrl:string;
@@ -35,7 +36,7 @@ export const useAuthStore = defineStore({
               api.defaults.headers["Authorization"]='Bearer ' + this.token;
               this.currentDomain=await this.getCurrentDomain();
               localStorage.setItem('currentDomain',JSON.stringify(this.currentDomain));
-              Router.push(this.returnUrl || '/');
+              this.router.push(this.returnUrl || '/');
               return true;
           }catch(e)
           {