feat: got routes and auth working

nuxt.config.ts

@@ -104,6 +104,7 @@ const config: Configuration = {
     },
     transpile: ['vee-validate'],
   },
+  serverMiddleware: ['~/api/index.ts'],
   // extend(config, ctx) {},
 };
 

src/api/index.ts

@@ -0,0 +1,16 @@
+import * as express from 'express';
+import { CounterRoutes } from './routes/CounterRoutes';
+import { DemoRoutes } from './routes/DemoRoutes';
+
+const app = express();
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+CounterRoutes(app);
+DemoRoutes(app);
+
+// Export the server middleware
+module.exports = {
+  path: '/',
+  handler: app,
+};

src/api/routes/CounterRoutes.ts

@@ -0,0 +1,15 @@
+import * as express from 'express';
+
+export const CounterRoutes = (app: express.Application) => {
+  app.put('/counter/increment', (req: express.Request, res: express.Response) => {
+    setTimeout(() => {
+      res.status(200).json({ count: parseInt(req.body.count, 10) + 1 });
+    }, 200);
+  });
+
+  app.put('/counter/decrement', (req: express.Request, res: express.Response) => {
+    setTimeout(() => {
+      res.status(200).json({ count: parseInt(req.body.count, 10) - 1 });
+    }, 200);
+  });
+};

src/api/routes/DemoRoutes.ts

@@ -0,0 +1,62 @@
+import * as express from 'express';
+// import { serve } from '../utils/Utils';
+// import { getIntInRange } from '@vuesion/utils/dist/randomGenerator';
+
+const getIntInRange = (min: number, max: number): number => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const getErrorWithProbability = (probability: number) => getIntInRange(0, 100) <= probability;
+
+export const DemoRoutes = (app: express.Application) => {
+  /**
+   * http -> https redirect for heroku
+   */
+  app.get('*', (req: express.Request, res: express.Response, next: any) => {
+    const host: string = req.headers.host || 'localhost:3000';
+    const redirect: string = `https://${host}` + req.url;
+
+    if (req.headers['x-forwarded-proto'] && req.headers['x-forwarded-proto'] !== 'https') {
+      res.redirect(redirect);
+    } else {
+      next();
+    }
+  });
+  // app.use('/storybook', serve('../../storybook-static'));
+  app.use('/docs', (req: express.Request, res: express.Response) => {
+    res.status(301).redirect('https://vuesion.github.io/docs/en/');
+  });
+
+  /**
+   * Auth-Demo
+   */
+  app.post('/token', (req: express.Request, res: express.Response) => {
+    if (getErrorWithProbability(10)) {
+      res.status(500).json({});
+    } else if (req.body.grant_type === 'password') {
+      res.status(200).json({ access_token: 'accessToken', refresh_token: 'refreshToken' });
+    } else if (req.body.grant_type === 'refresh_token' && req.body.refresh_token === 'refreshToken') {
+      res.status(200).json({ access_token: 'accessToken2', refresh_token: 'refreshToken2' });
+    } else if (req.body.grant_type === 'refresh_token' && req.body.refresh_token === 'refreshToken2') {
+      res.status(200).json({ access_token: 'accessToken', refresh_token: 'refreshToken' });
+    }
+  });
+
+  app.delete('/token', (req: express.Request, res: express.Response) => {
+    if (getErrorWithProbability(10)) {
+      res.status(500).json({});
+    } else {
+      res.status(200).json({});
+    }
+  });
+
+  app.get('/protected', (req: express.Request, res: express.Response) => {
+    if (getErrorWithProbability(40)) {
+      res.status(401).json({});
+    } else {
+      res.status(200).json({});
+    }
+  });
+};

src/layouts/default.vue

@@ -46,12 +46,12 @@
           Home
         </vue-sidebar-group-item>
 
-        <vue-sidebar-group-item :to="{ name: 'counter' }">
+        <vue-sidebar-group-item :to="{ name: 'example-counter' }">
           <vue-icon-hashtag />
           VueX Example
         </vue-sidebar-group-item>
 
-        <vue-sidebar-group-item :to="{ name: 'form' }">
+        <vue-sidebar-group-item :to="{ name: 'example-form' }">
           <vue-icon-hashtag />
           Form Example
         </vue-sidebar-group-item>
@@ -212,7 +212,7 @@ export default {
       try {
         await this.createToken(formData);
 
-        this.$router.push({ path: this.localePath('/dashboard') });
+        this.$router.push({ path: this.localePath('/example/dashboard') });
       } catch (e) {
         addNotification({ title: 'Error during login', text: 'Please try again!' });
       }

src/middleware/auth.ts

@@ -0,0 +1,10 @@
+import { Middleware } from '@nuxt/types';
+
+const authMiddleware: Middleware = ({ app, store, redirect }) => {
+  if (!store.getters['auth/isAuthenticated']) {
+    const redirectArg = '?redirect=' + encodeURI(app.router.history.current.path);
+    return redirect(app.localePath('/') + redirectArg);
+  }
+};
+
+export default authMiddleware;

src/pages/dashboard.vue → src/pages/example/dashboard.vue

@@ -60,12 +60,13 @@ import VueGridColumn from '@/components/VueGrid/VueGridColumn/VueGridColumn.vue'
 import VueBreadcrumb from '@/components/VueBreadcrumb/VueBreadcrumb.vue';
 import VueHeadline from '@/components/VueHeadline/VueHeadline.vue';
 import VueButton from '@/components/VueButton/VueButton.vue';
-// import { HttpService } from '@shared/services/HttpService/HttpService';
+import { HttpService } from '@/components/services/HttpService/HttpService';
 
 export default {
   metaInfo: {
     title: 'Dashboard',
   },
+  middleware: ['auth'],
   components: {
     VueBreadcrumb,
     VueGrid,
@@ -84,8 +85,8 @@ export default {
 
       this.pending = true;
 
-      for (let i = 0; i < 1; i++) {
-        // requests.push(HttpService.get('/protected'));
+      for (let i = 0; i < 10; i++) {
+        requests.push(HttpService.get('/protected'));
       }
 
       Promise.all(requests)

tsconfig.json

@@ -31,7 +31,8 @@
       "@types/lodash",
       "@types/testing-library__jest-dom",
       "nuxt-i18n",
-      "jest"
+      "express",
+      "jest",
     ]
   },
   "include": ["./src/**/*", "./src/**/*.vue"],