feat(access): implement access aproach

lbwa · lbwa · commit d62063da771b · 2018-11-24T15:11:21.000+08:00
diff --git a/src/api/index.js b/src/api/index.js
@@ -11,12 +11,16 @@ export function userLogin ({
   })
 }
 
+export function fetchUserAccess ({ username }) {
+  return request.post(routes.ACCESS, {
+    username
+  })
+}
+
 export function fetchDynamicRoutes ({
-  username,
-  accessToken
+  username
 }) {
   return request.post(routes.DYNAMIC_ROUTES, {
-    username,
-    accessToken
+    username
   })
 }
diff --git a/src/api/routes.js b/src/api/routes.js
@@ -1,4 +1,5 @@
 export default {
   LOGIN: '/user/login',
+  ACCESS: '/user/access',
   DYNAMIC_ROUTES: '/user/access'
 }
diff --git a/src/components/RouteExport.js b/src/components/RouteExport.js
@@ -0,0 +1,7 @@
+export default {
+  render (h) {
+    return h('router-view', {
+      class: 'router-export'
+    })
+  }
+}
diff --git a/src/layout/Material/Header.vue b/src/layout/Material/Header.vue
@@ -7,17 +7,17 @@
     <el-button
       class="logout"
       type="text"
-      @click="$router.push('/pages/admin/dashboard')"
+      @click="$router.push('/admin/dashboard')"
     >dashboard</el-button>
     <el-button
       class="logout"
       type="text"
-      @click="$router.push('/pages/admin/table')"
+      @click="$router.push('/admin/table')"
     >table</el-button>
     <el-button
       class="logout"
       type="text"
-      @click="$router.push('/pages/common/user')"
+      @click="$router.push('/common/user')"
     >user info</el-button>
     <el-button
       class="logout"
diff --git a/src/pages/Access/index.vue b/src/pages/Access/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <section class="access__static">
+    this is static route for {{$route.meta.role}} role.
+  </section>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang='scss' scoped>
+</style>
diff --git a/src/pages/NotFound/index.js b/src/pages/NotFound/index.js
@@ -0,0 +1,9 @@
+export default {
+  name: 'NotFound',
+  render (h) {
+    return h('section', {
+      class: 'not-found'
+    },
+    'Seems nothing could found.')
+  }
+}
diff --git a/src/permission/index.js b/src/permission/index.js
@@ -18,37 +18,39 @@ router.beforeEach((to, from, next) => {
   NProgress.start()
 
   // Jump to target path directly If target path has been included by white list
+  // or common routes
+  // if (WHITELIST.includes(to.path) || !to.meta.roles) {
   if (WHITELIST.includes(to.path)) {
-    next()
-    return
+    return next()
   }
 
-  // fetching user private routes
-  if (getTokenFromLocal()) { // User has been logged in
-    if (
-      !store.state.login.dynamicRoutes.length ||
-      !store.state.login.dynamicRoutes[0].component
-    ) {
-      store.dispatch('login/fetchDynamicRoutes')
-        .then(routes => store.dispatch('login/createGlobalRoutes', routes))
-        .catch(e => {
-          MessageBox({
-            title: 'Error',
-            message: 'We got a error when fetching user access.',
-            type: 'error',
-            showClose: false
-          })
-            .then(() => store.dispatch('login/userLogout'))
-            .then(() => next({
-              path: `/login?redirect=${to.path}`,
-              replace: true
-            }))
-          NProgress.done()
-          console.error(e)
-        })
+  // ! State: User has been logged in.
+  if (getTokenFromLocal()) {
+    // 1. fetch rolesMap if necessary (when rolesMap stored by back-end)
+
+    // 2. confirm route access by user role
+    if (!store.getters['login/role']) {
+      // 2.1 No roles: fetch user role
+      return store.dispatch(
+        'login/fetchUserAccess',
+        store.getters['login/username']
+      )
+        .catch(e => errorHandler(e, next, to.path))
+        .finally(() => next())
+    }
+
+    // 2.2 filter route
+    if (!to.meta.roles ||
+      to.meta.roles.includes(store.getters['login/role'][0])) {
+      next()
+    } else {
+      next({
+        path: `/403?redirect=${to.path}`,
+        replace: true
+      })
     }
-    next()
   } else {
+    // ! State: user logout
     next({
       path: `/login?redirect=${to.path}`,
       replace: true
@@ -61,3 +63,19 @@ router.afterEach((to, from) => {
 })
 
 export default router
+
+function errorHandler (e, next, redirectPath) {
+  MessageBox({
+    title: 'Error',
+    message: 'We got a error when fetching user access.',
+    type: 'error',
+    showClose: false
+  })
+    .then(() => store.dispatch('login/userLogout'))
+    .then(() => next({
+      path: `/login?redirect=${redirectPath}`,
+      replace: true
+    }))
+  NProgress.done()
+  console.error(e)
+}
diff --git a/src/permission/rolesMap.js b/src/permission/rolesMap.js
@@ -0,0 +1,14 @@
+/**
+ * This map can be stored by back-end, rather than front-end for implement
+ * real-time route access edit.
+ */
+export default {
+  admin: {
+    dashboard: ['sudo', 'admin'],
+    table: ['sudo', 'admin']
+  },
+  access: {
+    admin: ['super admin', 'admin'],
+    user: ['user']
+  }
+}
diff --git a/src/router/components/constant.js b/src/router/components/constant.js
@@ -1,5 +1,10 @@
 // ! constant component path, based on `/src` directory
 export default [
+  'pages/Access',
   'pages/Home',
-  'pages/Login'
+  'pages/Admin/Dashboard',
+  'pages/Admin/Table',
+  'pages/Common/User',
+  'pages/Login',
+  'pages/NotFound'
 ]
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,9 +1,14 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { constantComponents } from './components'
+import permission from 'PERMISSION/rolesMap'
+
+const plainExport = () => import('COMPONENTS/RouteExport')
 
 Vue.use(Router)
 
+console.log('constantComponents :', constantComponents)
+
 export const constantRoutes = [
   {
     path: '/',
@@ -21,6 +26,65 @@ export const constantRoutes = [
     meta: {
       layout: 'plain'
     }
+  },
+  {
+    path: '/admin',
+    component: plainExport,
+    children: [
+      {
+        path: 'dashboard',
+        component: constantComponents.pagesAdminDashboard,
+        meta: {
+          roles: permission.admin.dashboard
+        }
+      },
+      {
+        path: 'table',
+        component: constantComponents.pagesAdminTable,
+        meta: {
+          roles: permission.admin.table
+        }
+      }
+    ]
+  },
+  {
+    path: '/common',
+    component: plainExport,
+    children: [
+      {
+        path: 'user',
+        component: constantComponents.pagesCommonUser
+      }
+    ]
+  },
+  {
+    path: '/access',
+    name: 'access',
+    component: plainExport,
+    children: [
+      {
+        path: 'admin',
+        component: constantComponents.pagesAccess,
+        meta: {
+          roles: permission.access.admin
+        }
+      },
+      {
+        path: 'user',
+        component: constantComponents.pagesAccess,
+        meta: {
+          roles: permission.access.user
+        }
+      }
+    ]
+  },
+  {
+    path: '/404',
+    component: constantComponents.pagesNotFound
+  },
+  {
+    path: '*',
+    redirect: '/404'
   }
 ]
 
diff --git a/src/store/modules/login/actions.js b/src/store/modules/login/actions.js
@@ -1,4 +1,4 @@
-import { userLogin, fetchDynamicRoutes } from 'API'
+import { userLogin, fetchUserAccess, fetchDynamicRoutes } from 'API'
 import types from './mutations/types'
 import router from 'ROUTER'
 
@@ -27,8 +27,13 @@ export default {
   },
   userLogout ({ commit }) {
     commit(types.SET_USERNAME, '')
+    commit(types.SET_USER_ROLE, '')
     commit(types.SET_ACCESS_TOKEN, '')
   },
+  fetchUserAccess ({ commit }, username) {
+    return fetchUserAccess({ username })
+      .then(({ roles }) => commit(types.SET_USER_ROLE, roles))
+  },
   fetchDynamicRoutes ({ state }) {
     return fetchDynamicRoutes({
       username: state.username,
diff --git a/src/store/modules/login/getters.js b/src/store/modules/login/getters.js
@@ -1,4 +1,10 @@
 export default {
+  username (state) {
+    return state.username
+  },
+  role (state) {
+    return state.role
+  },
   // used to add user private routes to global routes map.
   dynamicRoutes (state) {
     return state.dynamicRoutes
diff --git a/src/store/modules/login/mutations/index.js b/src/store/modules/login/mutations/index.js
@@ -14,6 +14,9 @@ export default {
       : removeTokenFromLocal()
     state.accessToken = accessToken
   },
+  [types.SET_USER_ROLE] (state, role) {
+    state.role = role
+  },
   [types.SET_DYNAMIC_ROUTES] (state, dynamicRoutes) {
     const components = createImporters(dynamicRoutes)
     state.dynamicRoutes = dynamicRoutes.map(path => {
diff --git a/src/store/modules/login/mutations/types.js b/src/store/modules/login/mutations/types.js
@@ -1,6 +1,7 @@
 export default {
   SET_USERNAME: 'SET_USERNAME',
   SET_ACCESS_TOKEN: 'SET_ACCESS_TOKEN',
+  SET_USER_ROLE: 'SET_USER_ROLE',
   SET_DYNAMIC_ROUTES: 'SET_DYNAMIC_ROUTES',
   SET_ALL_ROUTES: 'SET_ALL_ROUTES'
 }
diff --git a/src/store/modules/login/state.js b/src/store/modules/login/state.js
@@ -1,6 +1,7 @@
 export default {
   username: '',
   accessToken: '',
+  role: '',
   dynamicRoutes: [],
   allRoutes: []
 }
diff --git a/src/store/state.js b/src/store/state.js
@@ -1,3 +1,3 @@
 export default {
-  isAsideCollapse: false
+  isAsideCollapse: true
 }
diff --git a/vue.config.js b/vue.config.js
@@ -14,7 +14,8 @@ module.exports = {
         'ROUTER': path.resolve(PATH.SOURCE_PATH, './router'),
         'STORE': path.resolve(PATH.SOURCE_PATH, './store'),
         'UTILS': path.resolve(PATH.SOURCE_PATH, './utils'),
-        'API': path.resolve(PATH.SOURCE_PATH, './api')
+        'API': path.resolve(PATH.SOURCE_PATH, './api'),
+        'PERMISSION': path.resolve(PATH.SOURCE_PATH, './permission')
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export default {`
`2`	`2`	`LOGIN: '/user/login',`
	`3`	`+ ACCESS: '/user/access',`
`3`	`4`	`DYNAMIC_ROUTES: '/user/access'`
`4`	`5`	`}`