Perfect login

src/config/router.config.js

@@ -233,7 +233,7 @@ export const constantRouterMap = [
   },
   {
     path: '/404',
-    name: '404',
+    name: 'NotFound',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
   }
 ]

src/core/lazy_use.js

@@ -7,6 +7,7 @@ import '@/core/lazy_lib/components_use'
 import Viser from 'viser-vue'
 import VueCropper from 'vue-cropper'
 import 'ant-design-vue/dist/antd.less'
+import bootstrap from './bootstrap'
 
 // ext library
 import VueClipboard from 'vue-clipboard2'
@@ -18,3 +19,5 @@ Vue.use(Viser)
 Vue.use(VueStorage, config.storageOptions)
 Vue.use(VueClipboard)
 Vue.use(VueCropper)
+
+bootstrap()

src/main.js

@@ -6,35 +6,18 @@ import store from './store/'
 import './logger'
 
 import './core/lazy_use'
-import bootstrap from './core/bootstrap'
+import './permission'
 import '@/utils/filter' // global filter
 import './components'
 import animated from 'animate.css'
 
 Vue.config.productionTip = false
 
-router.beforeEach((to, from, next) => {
-  if (to.meta.title) {
-    document.title = to.meta.title + ' | Halo Dashboard'
-  }
-
-  if (to.name !== 'Login' && to.name !== 'Install' && to.name !== '404' && !store.getters.token) {
-    Vue.$log.debug('Redirectint to Login page')
-    next({ name: 'Login' })
-    return
-  }
-
-  next()
-})
-
 Vue.use(router)
 Vue.use(animated)
 
 new Vue({
   router,
   store,
-  created() {
-    bootstrap()
-  },
   render: h => h(App)
 }).$mount('#app')

src/permission.js

@@ -4,97 +4,36 @@ import store from './store'
 
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import notification from 'ant-design-vue/es/notification'
-import { ACCESS_TOKEN } from '@/store/mutation-types'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['login'] // no redirect whitelist
+const whiteList = ['Login', 'Install', 'NotFound'] // no redirect whitelist
 
 router.beforeEach((to, from, next) => {
-  NProgress.start() // start progress bar
+  NProgress.start()
-
+  Vue.$log.debug('Token', store.getters.token)
-  if (Vue.ls.get(ACCESS_TOKEN)) {
+  if (store.getters.token) {
-    /* has token */
+    if (to.name === 'Login') {
-    if (to.path === '/user/login') {
       next({ name: 'Dashboard' })
       NProgress.done()
-    } else {
+      return
-      if (store.getters.roles.length === 0) {
-        store
-          .dispatch('GetInfo')
-          .then(res => {
-            const roles = res.result && res.result.role
-            store.dispatch('GenerateRoutes', { roles }).then(() => {
-              // 根据roles权限生成可访问的路由表
-              // 动态添加可访问路由表
-              router.addRoutes(store.getters.addRouters)
-              const redirect = decodeURIComponent(from.query.redirect || to.path)
-              if (to.path === redirect) {
-                // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
-                next({ ...to, replace: true })
-              } else {
-                // 跳转到目的路由
-                next({ path: redirect })
     }
-            })
+    // TODO Get installation status
-          })
+
-          .catch(() => {
-            notification.error({
-              message: '错误',
-              description: '请求用户信息失败，请重试'
-            })
-            store.dispatch('Logout').then(() => {
-              next({ path: '/user/login', query: { redirect: to.fullPath } })
-            })
-          })
-      } else {
     next()
+    return
   }
-    }
+
-  } else {
+  // Not login
+  // Check whitelist
   if (whiteList.includes(to.name)) {
-      // 在免登录白名单，直接进入
     next()
-    } else {
+    return
-      next({ path: '/user/login', query: { redirect: to.fullPath } })
-      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
-    }
   }
+
+  next({ name: 'Login', query: { redirect: to.fullPath } })
 })
 
 router.afterEach(() => {
-  NProgress.done() // finish progress bar
+  NProgress.done()
 })
-
-/**
- * Action 权限指令
- * 指令用法：
- *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
- *    <i-button v-action:add >添加用户</a-button>
- *    <a-button v-action:delete>删除用户</a-button>
- *    <a v-action:edit @click="edit(record)">修改</a>
- *
- *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
- *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
- *
- *  @see https://github.com/sendya/ant-design-pro-vue/pull/53
- */
-const action = Vue.directive('action', {
-  bind: function(el, binding, vnode) {
-    const actionName = binding.arg
-    const roles = store.getters.roles
-    const elVal = vnode.context.$route.meta.permission
-    const permissionId = (elVal instanceof String && [elVal]) || elVal
-    roles.permissions.forEach(p => {
-      if (!permissionId.includes(p.permissionId)) {
-        return
-      }
-      if (p.actionList && !p.actionList.includes(actionName)) {
-        ;(el.parentNode && el.parentNode.removeChild(el)) || (el.style.display = 'none')
-      }
-    })
-  }
-})
-
-export { action }

src/store/modules/user.js

@@ -4,7 +4,7 @@ import adminApi from '@/api/admin'
 
 const user = {
   state: {
-    token: '',
+    token: null,
     name: '',
     avatar: '',
     roles: [],

src/views/user/Login.vue

@@ -83,7 +83,11 @@ export default {
       })
     },
     loginSuccess() {
-      this.$router.push({ name: 'Dashboard' })
+      if (this.$route.query.redirect) {
+        this.$router.replace(this.$route.query.redirect)
+      } else {
+        this.$router.replace({ name: 'Dashboard' })
+      }
       // 延迟 1 秒显示欢迎信息
       setTimeout(() => {
         this.$notification.success({