diff --git a/.env.development b/.env.development
index bd407f28f..b421e3c41 100644
--- a/.env.development
+++ b/.env.development
@@ -12,3 +12,7 @@ VUE_APP_BASE_API = '/rpc'
 # Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
 
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+# External auth
+LOGIN_PATH = '/core/auth/login/'
+LOGOUT_PATH = '/core/auth/logout/'
diff --git a/.env.production b/.env.production
index 38338dee0..8a085506a 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,10 @@
 # just a flag
 ENV = 'production'
+
 # base api
 VUE_APP_BASE_API = '/'
 
+# External auth
+LOGIN_PATH = '/core/auth/login/'
+LOGOUT_PATH = '/core/auth/logout/
+
diff --git a/src/assets/img/robot.png b/src/assets/img/robot.png
new file mode 100644
index 000000000..e3bdb6e83
Binary files /dev/null and b/src/assets/img/robot.png differ
diff --git a/src/components/SummaryCard/index.vue b/src/components/SummaryCard/index.vue
index ce5877a03..3562fba98 100644
--- a/src/components/SummaryCard/index.vue
+++ b/src/components/SummaryCard/index.vue
@@ -10,9 +10,9 @@
     </div>
     <slot>
       <h1 class="no-margins">
-        <a :href="body.link">
+        <router-link :to="body.route">
           <span>{{ body.count }}</span>
-        </a>
+        </router-link>
       </h1>
       <small>{{ body.comment }}</small>
     </slot>
diff --git a/src/layout/components/NavHeader/AccountDropdown.vue b/src/layout/components/NavHeader/AccountDropdown.vue
index 87c887a62..24f5828de 100644
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/src/layout/components/NavHeader/AccountDropdown.vue
@@ -62,7 +62,7 @@ export default {
           window.location.href = `/`
           break
         case 'logout':
-          window.location.href = `/auth/logout/?next=${this.$route.fullPath}`
+          window.location.href = `/core/auth/logout/?next=${this.$route.fullPath}`
           break
         case 'apiKey':
           this.$refs.api.showApi()
diff --git a/src/permission.js b/src/permission.js
index 8d8a023b9..aef219137 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -11,7 +11,7 @@ NProgress.configure({
   showSpinner: false
 }) // NProgress Configuration
 
-const whiteList = ['/login', '/auth/login/'] // no redirect whitelist
+const whiteList = ['/login'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar
@@ -29,7 +29,7 @@ router.beforeEach(async(to, from, next) => {
       next()
     } else {
     // other pages that do not have permission to access are redirected to the login page.
-      next(`/auth/login/`)
+      next(process.env.LOGIN_PATH)
       NProgress.done()
       return
     }
diff --git a/src/router/index.js b/src/router/index.js
index 48b9599cf..6b3434889 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -237,7 +237,7 @@ export const userRoutes = [
 const createRouter = () => new Router({
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
-  mode: 'history',
+  // mode: 'history',
   base: '/ui/',
   routes: constantRoutes
 })
diff --git a/src/utils/request.js b/src/utils/request.js
index ec8c4f8a4..7a5640b90 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -70,7 +70,7 @@ service.interceptors.response.use(
     const response = error.response
     if (response.status === 401) {
       // 未授权重定向到登录页面
-      window.location = '/auth/login/'
+      window.location = process.env.LOGIN_PATH
       // const title = ''
       // const msg = i18n.t('auth.LoginRequiredMsg')
       // MessageBox.confirm(msg, title, {
diff --git a/src/views/404.vue b/src/views/404.vue
index 1791f55a3..dee0f7621 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -1,21 +1,12 @@
 <template>
-  <div class="wscn-http404-container">
-    <div class="wscn-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__info">All rights reserved
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
-        </div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
-        <a href="" class="bullshit__return-home">Back to home</a>
-      </div>
+  <div class="error-404-container">
+    <div class="error-404-text">
+      <h1 class="error-404-title">404 请求错误</h1>
+      <p class="error-404-subtitle">无法访问当前页面</p>
+      <router-link to="dashboard" class="el-button el-button--success error-button">去往首页</router-link>
+    </div>
+    <div class="error-404-image-container">
+      <img class="error-404-error-image" src="@/assets/img/robot.png" alt="page error">
     </div>
   </div>
 </template>
@@ -33,196 +24,51 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wscn-http404-container{
-  transform: translate(-50%,-50%);
-  position: absolute;
-  top: 40%;
-  left: 50%;
-}
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  padding: 0 50px;
-  overflow: hidden;
-  .pic-404 {
-    position: relative;
-    float: left;
-    width: 600px;
-    overflow: hidden;
-    &__parent {
-      width: 100%;
-    }
-    &__child {
-      position: absolute;
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
-    }
+  .error-404-container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    margin-top: 180px;
   }
-  .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;
-      }
-    }
+
+  .error-404-text {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    min-width: 384px;
+  }
+
+  .error-404-title {
+    font-size: 40px;
+    font-weight: 600;
+    font-synthesis: style;
+  }
+
+  .error-404-subtitle {
+    font-size: 18px;
+    margin-top: 10px;
+    color: #646464;
+    line-height: 1.4;
+  }
+
+  .error-button {
+    margin-top: 20px;
+  }
+
+  a {
+    color: white !important;
   }
-}
 </style>
diff --git a/src/views/dashboard/ResourceSummary.vue b/src/views/dashboard/ResourceSummary.vue
index 1e4efa219..2c54e88aa 100644
--- a/src/views/dashboard/ResourceSummary.vue
+++ b/src/views/dashboard/ResourceSummary.vue
@@ -32,7 +32,7 @@ export default {
             type: 'success'
           },
           body: {
-            link: '/users/users',
+            route: `/users/users`,
             count: this.counter.total_count_users,
             comment: 'All users'
           }
@@ -44,7 +44,7 @@ export default {
             type: 'info'
           },
           body: {
-            link: '/users/assets',
+            route: `/assets/assets`,
             count: this.counter.total_count_assets,
             comment: 'All assets'
           }
@@ -56,7 +56,7 @@ export default {
             type: 'primary'
           },
           body: {
-            link: '/terminal/sessions',
+            route: `/terminal/sessions`,
             count: this.counter.total_count_online_users,
             comment: 'Online users'
           }
@@ -68,7 +68,7 @@ export default {
             type: 'danger'
           },
           body: {
-            link: '/terminal/sessions',
+            route: `/terminal/sessions`,
             count: this.counter.total_count_online_sessions,
             comment: 'Online sessions'
           }
diff --git a/src/views/sessions/SessionList/BaseList.vue b/src/views/sessions/SessionList/BaseList.vue
index 9c88b960f..ded3339ca 100644
--- a/src/views/sessions/SessionList/BaseList.vue
+++ b/src/views/sessions/SessionList/BaseList.vue
@@ -2,7 +2,7 @@
   <ListTable :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
-<script>
+<script type="text/jsx">
 import ListTable from '@/components/ListTable'
 import { timeOffset, toSafeLocalDateStr } from '@/utils/common'
 import { ActionsFormatter } from '@/components/ListTable/formatters'
diff --git a/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionDetail/ChangeAuthPlanExecutionTaskList.vue b/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionDetail/ChangeAuthPlanExecutionTaskList.vue
index 30f8000b4..e20adfec8 100644
--- a/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionDetail/ChangeAuthPlanExecutionTaskList.vue
+++ b/src/views/xpack/ChangeAuthPlan/ChangeAuthPlanDetail/ChangeAuthPlanExecution/ChangeAuthPlanExecutionDetail/ChangeAuthPlanExecutionTaskList.vue
@@ -28,7 +28,8 @@ export default {
           asset: {
             label: this.$t('xpack.Asset'),
             formatter: function(row, column, cellValue, index) {
-              return <a class='detail el-link el-link--success is-underline' href={ `/assets/assets/${cellValue}` }>{ row.asset_info.hostname }</a>
+              const url = `/assets/assets/${cellValue}`
+              return <router-link to={ url } >{ row.asset_info.hostname }</router-link>
             }
           },
           is_success: {
diff --git a/vue.config.js b/vue.config.js
index ab3f37117..676def842 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -47,7 +47,7 @@ module.exports = {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
-      '^/(auth|static)': {
+      '^/core/': {
         target: `http://localhost:8080`,
         changeOrigin: true
       }