add 404 page

Strides-Admin/src/router/index.js

@@ -27,7 +27,12 @@ const constantRoutes = [
   {
     path: '/redirect',
     hidden: true,
-    component: () => import('@/views/redirect')
+    component: () => import('@/views/redirect/index')
+  },
+  {
+    path: '/404',
+    hidden: true,
+    component: () => import('@/views/redirect/404')
   },
   {
     path: '/login',

Strides-Admin/src/router/permission.js

@@ -46,7 +46,7 @@ router.beforeEach(async(to, from, next) => {
       next({ path: '/' })
       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else if (!validPath && whiteList.indexOf(to.path) == -1) {
-      next({ path: '/' })
+      next({ path: '/404' })
       NProgress.done()
     } else {
       next();
@@ -86,7 +86,7 @@ router.beforeEach(async(to, from, next) => {
       next()
       NProgress.done()
     } else if (!validPath) {
-      next({ path: hasToken ? '/login' : '/' })
+      next({ path: hasToken ? '/login' : '/404' })
       NProgress.done()
     } else {
       // other pages that do not have permission to access are redirected to the login page.

Strides-Admin/src/views/redirect.vue

@@ -1,43 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-import store from '@/store'
-import permission from '@/utils/permission.js'
-import { getAuthRoutes } from '@/utils/auth.js'
-export default {
-  data() {
-    return {
-      
-    }
-  },
-  created() {
-    this.checkPermission()
-  },
-  methods: {
-    checkPermission() {
-      let path = '/dashboard'
-      const routes = getAuthRoutes();
-      if (routes.length > 0) {
-        let validPath = false;
-        for (let _route of routes) {
-          if (path.indexOf(_route[permission.RESOURCE_KEY]) >= 0) {
-            validPath = true;
-            break
-          }
-        }
-        if (!validPath) {
-          path =  routes[0][permission.RESOURCE_KEY];
-        }
-      }
-      this.$router.push({
-        path: path
-      })
-    }
-  }
-}
-</script>
-
-<style>
-</style>

Strides-Admin/src/views/redirect/404.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="vbe-http404-container">
+    <div class="vbe-http404">
+      <div class="pic-404">
+        <img
+          class="pic-404__parent"
+          src="@/assets/404_images/404.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child left"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child mid"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child right"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="link-type" style="display: inline-block;" @click="backHome">Back to Home</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Page404",
+  computed: {
+    message() {
+      return "Sorry, you do not have access rights or the url is incorrect. Please contact your administrator!";
+    },
+  },
+  methods: {
+    backHome() {
+      this.$router.replace({
+        path: "/"
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.vbe-http404-container {
+  height: 100vh;
+  padding-bottom: 15vh;
+}
+.vbe-http404 {
+  width: 100%;
+  height: 100%;
+  padding: 0 50px;
+  display: flex;
+  overflow: hidden;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  justify-content: center;
+  .pic-404 {
+    position: relative;
+    min-width: 300px;
+    max-width: 600px;
+    overflow: hidden;
+    z-index: 1;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        z-index: 2;
+        animation-name: cloudLeft;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+        animation-iteration-count: infinite;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+        animation-iteration-count: infinite;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+        animation-iteration-count: infinite;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        10% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        40% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        50% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        10% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        35% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        50% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        10% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        40% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        50% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+@media screen and(max-width: 520px) {
+  .vbe-http404-container {
+    height: 80vh;
+    padding: 10vh 0;
+  }
+}
+</style>

Strides-Admin/src/views/redirect/index.vue

@@ -1,12 +1,43 @@
+<template>
+  <div></div>
+</template>
+
 <script>
+import store from '@/store'
+import permission from '@/utils/permission.js'
+import { getAuthRoutes } from '@/utils/auth.js'
 export default {
+  data() {
+    return {
+      
+    }
+  },
   created() {
-    const { params, query } = this.$route
-    const { path } = params
-    this.$router.replace({ path: '/' + path, query })
+    this.checkPermission()
   },
-  render: function(h) {
-    return h() // avoid warning message
+  methods: {
+    checkPermission() {
+      let path = '/dashboard'
+      const routes = getAuthRoutes();
+      if (routes.length > 0) {
+        let validPath = false;
+        for (let _route of routes) {
+          if (path.indexOf(_route[permission.RESOURCE_KEY]) >= 0) {
+            validPath = true;
+            break
+          }
+        }
+        if (!validPath) {
+          path =  routes[0][permission.RESOURCE_KEY];
+        }
+      }
+      this.$router.push({
+        path: path
+      })
+    }
   }
 }
 </script>
+
+<style>
+</style>