Skip to content

Commit 69ea8f0

Browse files
temitopeadesojitemitopeadesoji
authored
Chore/route guard showcase (#126)
* chore: added vue app * chore: cleanup * chore: remove unused package added by nx-vue3-vite * chore: added vue-route-guard to showcase * chore: added pages * chore: cleanup import * chore: fix * chore: added stackblitz config * chore: updated * chore: added start vue showcase to package.json * chore: fix * chore: cleanup
1 parent 19eadfa commit 69ea8f0

22 files changed

+416
-115
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ This repository currently contains the following packages:
88
- [@this-dot/ng-utils](./libs/ng-utils/README.md)
99
- [@this-dot/cypress-indexeddb](./libs/cypress-indexeddb/README.md)
1010
- [@this-dot/rxidb](./libs/rxidb/README.md)
11+
- [@this-dot/vue-route-guard](./libs/vue-route-guard/README.md)
1112

1213
## Demo
1314

1415
You can try out our showcase application by following the steps below
1516

1617
1. [Import this repository on Stackblitz](https://stackblitz.com/github/thisdot/open-source?preset=node)
17-
2. Try out the showcase application.
18+
1. [Import this repository on Stackblitz and start the Vue application](https://stackblitz.com/github/thisdot/open-source?file=package.json&terminal=start:vue)
19+
1. Try out the showcase application.
1820

1921
## How to contribute
2022

‎apps/vue-showcase/components.d.ts

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
// generated by unplugin-vue-components
22
// We suggest you to commit this file into source control
33
// Read more: https://github.com/vuejs/core/pull/3399
4-
import '@vue/runtime-core';
4+
import '@vue/runtime-core'
55

66
declare module '@vue/runtime-core' {
77
export interface GlobalComponents {
8-
AppLogo: typeof import('./src/app/components/widgets/AppLogo.vue')['default'];
9-
RouterLink: typeof import('vue-router')['RouterLink'];
10-
RouterView: typeof import('vue-router')['RouterView'];
8+
AppLogo: typeof import('./src/app/components/widgets/AppLogo.vue')['default']
9+
RouterLink: typeof import('vue-router')['RouterLink']
10+
RouterView: typeof import('vue-router')['RouterView']
11+
SideBar: typeof import('./src/app/components/widgets/SideBar.vue')['default']
12+
TopBar: typeof import('./src/app/components/widgets/TopBar.vue')['default']
1113
}
1214
}
1315

14-
export {};
16+
export {}

‎apps/vue-showcase/src/app/App.vue

+18-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<template>
2-
<div class="app">
3-
<router-view />
2+
<div class="showcase__app">
3+
<TopBar />
4+
<div class="showcase__app__body">
5+
<SideBar />
6+
<div class="showcase__app__body__main">
7+
<router-view />
8+
</div>
9+
</div>
410
</div>
511
</template>
612

@@ -21,25 +27,21 @@ body {
2127
}
2228
}
2329
24-
.app {
30+
.showcase__app {
2531
height: 100%;
32+
33+
&__body {
34+
display: flex;
35+
36+
&__main {
37+
flex: auto;
38+
padding: 30px;
39+
}
40+
}
2641
}
2742
2843
a {
2944
text-decoration: none;
3045
color: unset;
3146
}
32-
33-
#app,
34-
.app-content {
35-
height: 100%;
36-
}
37-
38-
.container {
39-
max-width: 1200px;
40-
box-sizing: border-box;
41-
padding-left: 40px;
42-
padding-right: 40px;
43-
margin: 0 auto;
44-
}
4547
</style>

‎apps/vue-showcase/src/app/api.ts

-53
This file was deleted.

‎apps/vue-showcase/src/app/components/widgets/AppLogo.vue

+83-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,85 @@
11
<template>
2-
<img src="@assets/img/vue-logo.png" />
2+
<!-- eslint-disable max-len -->
3+
<svg
4+
width="162"
5+
height="37"
6+
viewBox="0 0 1620 365"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
>
10+
<path
11+
d="M51.7668 37.2521H0V3.4751H143.43V37.2521H91.6631V197.446H51.7668V37.2521Z"
12+
fill="#626D8E"
13+
/>
14+
<path
15+
d="M231.619 3.4751H271.631V89.8584H341.117V3.4751H380.955V197.446H341.059V123.751H271.573V197.446H231.619V3.4751Z"
16+
fill="#626D8E"
17+
/>
18+
<path d="M524.501 3.4751V197.446H484.662V3.4751H524.501Z" fill="#626D8E" />
19+
<path
20+
d="M618.654 145.826H659.188C660.577 159.673 670.247 166.336 683.855 166.336C697.463 166.336 706.438 158.282 706.438 145.826C706.438 133.37 698.679 126.128 672.332 115.352C633.71 99.419 620.218 81.169 620.218 52.6643C620.218 20.7992 643.38 0 680.844 0C715.124 0.0579365 741.181 20.5675 741.181 54.3444H700.647C700.793 51.6135 700.348 48.8833 699.343 46.3402C698.338 43.7971 696.796 41.501 694.822 39.6089C692.849 37.7168 690.49 36.2732 687.908 35.3767C685.326 34.4802 682.58 34.1519 679.86 34.4143C666.831 34.4143 660.172 42.4674 660.172 52.1428C660.172 63.7301 668.221 70.5667 695.32 82.2119C734.058 98.8397 746.508 116.279 746.508 143.451C746.508 177.633 722.13 200.634 683.102 200.634C644.074 200.634 620.855 176.88 618.654 145.826Z"
21+
fill="#626D8E"
22+
/>
23+
<path
24+
d="M939.099 197.446H874.361V3.4751H939.157C1001.98 3.4751 1044.37 38.9322 1044.37 100.461C1044.37 161.989 1001.98 197.446 939.099 197.446ZM939.388 37.31H914.2V163.554H939.388C975.695 163.554 1003.89 142.523 1003.89 100.693C1003.89 58.8624 975.695 37.2521 939.388 37.2521V37.31Z"
25+
fill="#626D8E"
26+
/>
27+
<path
28+
d="M1528.39 37.2521H1476.57V3.4751H1620V37.2521H1568.29V197.446H1528.45L1528.39 37.2521Z"
29+
fill="#626D8E"
30+
/>
31+
<path
32+
d="M1262.5 159.035C1295.79 159.035 1322.78 132.033 1322.78 98.7235C1322.78 65.4142 1295.79 38.4116 1262.5 38.4116C1229.21 38.4116 1202.22 65.4142 1202.22 98.7235C1202.22 132.033 1229.21 159.035 1262.5 159.035Z"
33+
fill="#F46663"
34+
/>
35+
<path
36+
d="M1355.55 1.73779H1305.93L1380.33 98.7235L1305.93 195.651H1355.55L1430.01 98.7235L1355.55 1.73779Z"
37+
fill="#9FACCC"
38+
/>
39+
<path
40+
d="M1169.44 1.73779H1219.07L1144.6 98.7235L1219.07 195.651H1169.44L1095.04 98.7235L1169.44 1.73779Z"
41+
fill="#9FACCC"
42+
/>
43+
<path
44+
d="M445.799 339.071C443.479 333.63 442.32 327.788 442.32 321.546C442.32 315.304 443.479 309.483 445.799 304.081C448.158 298.64 451.337 294.038 455.336 290.277C459.375 286.476 464.154 283.495 469.672 281.335C475.191 279.174 481.069 278.094 487.308 278.094C493.546 278.094 499.425 279.174 504.943 281.335C510.462 283.495 515.22 286.476 519.219 290.277C523.258 294.038 526.437 298.64 528.757 304.081C531.116 309.483 532.296 315.304 532.296 321.546C532.296 327.788 531.116 333.63 528.757 339.071C526.437 344.473 523.258 349.074 519.219 352.875C515.22 356.636 510.462 359.597 504.943 361.758C499.425 363.918 493.546 364.998 487.308 364.998C481.069 364.998 475.191 363.918 469.672 361.758C464.154 359.597 459.375 356.636 455.336 352.875C451.337 349.074 448.158 344.473 445.799 339.071ZM467.753 301.02C462.474 306.382 459.835 313.224 459.835 321.546C459.835 329.868 462.474 336.71 467.753 342.072C473.031 347.433 479.55 350.114 487.308 350.114C495.066 350.114 501.584 347.433 506.863 342.072C512.141 336.71 514.78 329.868 514.78 321.546C514.78 313.224 512.141 306.382 506.863 301.02C501.584 295.659 495.066 292.978 487.308 292.978C479.55 292.978 473.031 295.659 467.753 301.02Z"
45+
fill="#F46663"
46+
/>
47+
<path
48+
d="M607.158 342.403H596.487V364.998H578.619V278.094H607.158C612.452 278.094 617.312 278.921 621.737 280.577C626.163 282.232 629.844 284.508 632.781 287.405C635.717 290.26 637.992 293.654 639.605 297.585C641.218 301.517 642.025 305.738 642.025 310.249C642.025 314.759 641.218 318.98 639.605 322.912C637.992 326.843 635.717 330.257 632.781 333.154C629.844 336.01 626.163 338.265 621.737 339.92C617.312 341.576 612.452 342.403 607.158 342.403ZM619.132 322.974C622.317 319.953 623.909 315.711 623.909 310.249C623.909 304.786 622.317 300.544 619.132 297.523C615.988 294.502 611.501 292.992 605.669 292.992H596.487V327.505H605.669C611.501 327.505 615.988 325.995 619.132 322.974Z"
49+
fill="#F46663"
50+
/>
51+
<path
52+
d="M688.349 364.998V278.094H741.704V293.24H706.216V316.58H735.996V331.726H706.216V349.852H742.82V364.998H688.349Z"
53+
fill="#F46663"
54+
/>
55+
<path
56+
d="M789.144 364.998V278.094H802.297L843.616 332.595V278.094H861.484V364.998H848.331L807.012 310.373V364.998H789.144Z"
57+
fill="#F46663"
58+
/>
59+
<path
60+
d="M963.634 326.768C955.596 323.287 949.998 319.526 946.839 315.484C943.68 311.443 942.1 306.582 942.1 300.9C942.1 293.978 944.459 288.457 949.178 284.336C953.897 280.174 960.535 278.094 969.093 278.094C977.571 278.094 985.089 280.054 991.647 283.975L986.368 297.659C981.69 294.538 976.491 292.978 970.772 292.978C967.093 292.978 964.314 293.598 962.435 294.839C960.555 296.079 959.615 297.819 959.615 300.06C959.615 302.421 960.615 304.481 962.615 306.242C964.614 308.002 968.453 310.183 974.132 312.784C981.69 316.225 987.188 320.006 990.627 324.127C994.106 328.248 995.846 333.389 995.846 339.551C995.846 347.433 993.227 353.655 987.988 358.217C982.749 362.738 975.251 364.998 965.494 364.998C961.095 364.998 956.676 364.398 952.237 363.198C947.799 361.998 943.82 360.317 940.301 358.157L945.579 344.233C948.258 346.073 951.298 347.514 954.697 348.554C958.136 349.594 961.495 350.114 964.774 350.114C969.013 350.114 972.332 349.314 974.731 347.714C977.131 346.073 978.33 343.812 978.33 340.932C978.33 337.931 977.211 335.41 974.971 333.369C972.772 331.289 968.993 329.088 963.634 326.768Z"
61+
fill="#F46663"
62+
/>
63+
<path
64+
d="M1045.65 339.071C1043.33 333.63 1042.17 327.788 1042.17 321.546C1042.17 315.304 1043.33 309.483 1045.65 304.081C1048.01 298.64 1051.19 294.038 1055.19 290.277C1059.23 286.476 1064 283.495 1069.52 281.335C1075.04 279.174 1080.92 278.094 1087.16 278.094C1093.4 278.094 1099.27 279.174 1104.79 281.335C1110.31 283.495 1115.07 286.476 1119.07 290.277C1123.11 294.038 1126.29 298.64 1128.61 304.081C1130.97 309.483 1132.15 315.304 1132.15 321.546C1132.15 327.788 1130.97 333.63 1128.61 339.071C1126.29 344.473 1123.11 349.074 1119.07 352.875C1115.07 356.636 1110.31 359.597 1104.79 361.758C1099.27 363.918 1093.4 364.998 1087.16 364.998C1080.92 364.998 1075.04 363.918 1069.52 361.758C1064 359.597 1059.23 356.636 1055.19 352.875C1051.19 349.074 1048.01 344.473 1045.65 339.071ZM1067.6 301.02C1062.32 306.382 1059.68 313.224 1059.68 321.546C1059.68 329.868 1062.32 336.71 1067.6 342.072C1072.88 347.433 1079.4 350.114 1087.16 350.114C1094.92 350.114 1101.43 347.433 1106.71 342.072C1111.99 336.71 1114.63 329.868 1114.63 321.546C1114.63 313.224 1111.99 306.382 1106.71 301.02C1101.43 295.659 1094.92 292.978 1087.16 292.978C1079.4 292.978 1072.88 295.659 1067.6 301.02Z"
65+
fill="#F46663"
66+
/>
67+
<path
68+
d="M1228.18 362.74C1223.95 364.246 1219.34 364.998 1214.33 364.998C1209.33 364.998 1204.7 364.246 1200.43 362.74C1196.2 361.194 1192.42 358.936 1189.08 355.966C1185.79 352.956 1183.19 349.009 1181.27 344.127C1179.4 339.244 1178.47 333.67 1178.47 327.405V278.094H1196.04V328.503C1196.04 332.124 1196.52 335.339 1197.5 338.146C1198.52 340.953 1199.88 343.191 1201.59 344.859C1203.33 346.527 1205.29 347.788 1207.44 348.643C1209.6 349.457 1211.89 349.863 1214.33 349.863C1216.77 349.863 1219.07 349.457 1221.23 348.643C1223.38 347.788 1225.31 346.527 1227.02 344.859C1228.77 343.191 1230.13 340.953 1231.11 338.146C1232.12 335.339 1232.63 332.124 1232.63 328.503V278.094H1250.2V327.405C1250.2 333.67 1249.24 339.244 1247.33 344.127C1245.46 349.009 1242.86 352.956 1239.53 355.966C1236.23 358.936 1232.45 361.194 1228.18 362.74Z"
69+
fill="#F46663"
70+
/>
71+
<path
72+
d="M1360.67 308.51C1360.67 316.001 1358.36 322.332 1353.72 327.505C1349.13 332.678 1342.89 336.154 1334.99 337.934L1362.53 364.998H1339.83L1314.39 338.679V364.998H1296.52V278.094H1326.43C1336.85 278.094 1345.16 280.991 1351.37 286.784C1357.57 292.536 1360.67 299.779 1360.67 308.51ZM1314.39 292.992V324.774H1323.57C1329.74 324.774 1334.43 323.45 1337.66 320.801C1340.92 318.111 1342.56 314.139 1342.56 308.883C1342.56 303.793 1341.07 299.882 1338.09 297.151C1335.11 294.378 1331.1 292.992 1326.05 292.992H1314.39Z"
73+
fill="#F46663"
74+
/>
75+
<path
76+
d="M1408.86 321.546C1408.86 315.184 1410.04 309.263 1412.4 303.781C1414.8 298.3 1418.02 293.698 1422.05 289.977C1426.09 286.256 1430.79 283.355 1436.15 281.275C1441.51 279.154 1447.13 278.094 1453.01 278.094C1461.68 278.094 1469.4 279.614 1476.16 282.655L1470.88 296.339C1466.4 294.098 1460.56 292.978 1453.37 292.978C1445.69 292.978 1439.27 295.659 1434.11 301.02C1428.95 306.382 1426.37 313.224 1426.37 321.546C1426.37 326.027 1427.15 330.129 1428.71 333.85C1430.31 337.531 1432.43 340.532 1435.07 342.852C1437.71 345.173 1440.67 346.973 1443.95 348.254C1447.27 349.494 1450.73 350.114 1454.33 350.114C1461.08 350.114 1466.8 348.914 1471.48 346.513L1476.76 360.317C1470.72 363.438 1463.12 364.998 1453.97 364.998C1447.93 364.998 1442.19 363.978 1436.75 361.938C1431.31 359.897 1426.51 357.056 1422.35 353.415C1418.24 349.734 1414.96 345.153 1412.52 339.671C1410.08 334.15 1408.86 328.108 1408.86 321.546Z"
77+
fill="#F46663"
78+
/>
79+
<path
80+
d="M1523.08 364.998V278.094H1576.44V293.24H1540.95V316.58H1570.73V331.726H1540.95V349.852H1577.56V364.998H1523.08Z"
81+
fill="#F46663"
82+
/>
83+
</svg>
84+
<!-- eslint-disable max-len -->
385
</template>
4-
5-
<style lang="postcss" scoped>
6-
img {
7-
width: 120px;
8-
height: 120px;
9-
}
10-
</style>

‎apps/vue-showcase/src/app/components/widgets/SideBar.vue

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="showcase__app__sidebar">
3+
<template v-for="(item, i) in sidebarItems" :key="i">
4+
<a :href="item.link">{{ item.title }}</a>
5+
</template>
6+
</div>
7+
</template>
8+
9+
<script lang="ts" setup>
10+
const sidebarItems = [
11+
{
12+
title: '@this-dot/vue-route-guard',
13+
link: '/route-guard/',
14+
},
15+
];
16+
</script>
17+
18+
<style lang="postcss" scoped>
19+
.showcase__app__sidebar {
20+
display: flex;
21+
justify-content: space-between;
22+
padding: 20px;
23+
width: 100%;
24+
max-width: 220px;
25+
position: sticky;
26+
top: 77px;
27+
background-color: #e2e3e6;
28+
color: rgba(0, 0, 0, 0.87);
29+
height: calc(100vh - 77px);
30+
}
31+
</style>

‎apps/vue-showcase/src/app/components/widgets/TopBar.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div class="showcase-topbar">
3+
<AppLogo />
4+
<a href="https://github.com/thisdot/open-source">{{ $t('viewGithub') }}</a>
5+
</div>
6+
</template>
7+
8+
<style lang="postcss" scoped>
9+
.showcase-topbar {
10+
display: flex;
11+
align-items: center;
12+
justify-content: space-between;
13+
padding: 20px;
14+
background: #2f3c4f;
15+
color: white;
16+
height: 77px;
17+
position: sticky;
18+
top: 0;
19+
box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%),
20+
0px 1px 10px 0px rgb(0 0 0 / 12%);
21+
}
22+
</style>

‎apps/vue-showcase/src/app/main.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,10 @@ import { createApp } from 'vue';
22
import App from './App.vue';
33
import i18n from './i18n';
44
import router from './router';
5+
import routeGuard from './plugins/vue-route-guard';
56

6-
createApp(App).use(router).use(i18n).mount('#app');
7+
createApp(App)
8+
.use(router)
9+
.use(i18n)
10+
.use((app) => routeGuard(app, router))
11+
.mount('#app');

‎apps/vue-showcase/src/app/plugins/vue-route-guard.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { setupGuard } from '@this-dot/vue-route-guard';
2+
import * as vue from 'vue';
3+
import { Router } from 'vue-router';
4+
5+
export default (app: vue.App, router: Router) => {
6+
app.use(
7+
setupGuard({
8+
router: router,
9+
token: {
10+
name: 'VUEROUTEGUARD-TOKEN',
11+
},
12+
redirect: {
13+
noAuthentication: '/route-guard/login',
14+
clearAuthentication: '/route-guard/login',
15+
noPermission: '/route-guard/no-permission',
16+
},
17+
options: {
18+
fetchAuthentication: () => {
19+
return new Promise(function(resolve, _) {
20+
return resolve({
21+
firstName: 'Test',
22+
lastName: 'User',
23+
permission: ['user'],
24+
});
25+
});
26+
},
27+
},
28+
})
29+
);
30+
};

‎apps/vue-showcase/src/app/router.ts

+40
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,52 @@ const router = createRouter({
3131
component: () => import('./views/HomeView.vue'),
3232
meta: { title: 'vue-showcase', requiresAuth: false },
3333
},
34+
{
35+
path: '/route-guard',
36+
name: 'RouteGuard',
37+
component: () => import('./views/RouteGuard/BaseView.vue'),
38+
meta: { title: 'vue-route-guard-view', requiresAuth: false },
39+
children: [
40+
{
41+
path: '/route-guard',
42+
name: 'RouteGuardHome',
43+
component: () => import('./views/RouteGuard/HomeView.vue'),
44+
meta: { title: 'vue-route-guard-home-view', requiresAuth: true },
45+
},
46+
{
47+
path: '/route-guard/login',
48+
name: 'RouteGuardLogin',
49+
component: () => import('./views/RouteGuard/LoginView.vue'),
50+
meta: { title: 'vue-route-guard-login-view', requiresAuth: false },
51+
},
52+
{
53+
path: '/route-guard/about',
54+
name: 'RouteGuardAbout',
55+
component: () => import('./views/RouteGuard/AboutView.vue'),
56+
meta: {
57+
title: 'vue-route-guard-about-view',
58+
requiresAuth: true,
59+
access: ['admin'],
60+
},
61+
},
62+
{
63+
path: '/route-guard/no-permission',
64+
name: 'RouteGuardNoPermission',
65+
component: () => import('./views/RouteGuard/NoPermissionView.vue'),
66+
meta: {
67+
title: 'vue-route-guard-no-permission-view',
68+
requiresAuth: false,
69+
},
70+
},
71+
],
72+
},
3473
],
3574
});
3675

3776
router.afterEach((to, _from) => {
3877
const parent = to.matched.find((record) => record.meta.title);
3978
const parentTitle = parent ? parent.meta.title : null;
79+
4080
document.title = to.meta.title || parentTitle || 'vue-showcase';
4181
});
4282

0 commit comments

Comments
 (0)