接入权限

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://live-broadcast2-admin.ezijing.com/api',
+  url: 'https://cms-admin2.ezijing.com/api',
   webpack: {
     externals: {
       CKEDITOR: 'window.CKEDITOR',

src/api/system.js

@@ -14,71 +14,11 @@ export function operateLog(params) {
  * 模糊搜索
  */
 export function searchUserList(params) {
-  return httpRequest.get('/api/live/common/v1/sso-user/search', { params })
+  return httpRequest.get('/api/cms/admin/v1/common/user-search', { params })
 }
 /**
- * 获取当前用户的角色
+ * 获取当前用户的角色和权限
  */
-export function getUserRoles() {
-  return httpRequest.get('/api/live/admin/v2/user/roles')
-}
-/**
+export function getUserRolesPermissions() {
+  return httpRequest.get('/api/cms/admin/v1/common/user-detail')
+}
\ No newline at end of file
- * 创建角色
- */
-export function createRole(data) {
-  return httpRequest.post('/api/live/admin/v2/role', data)
-}
-/**
- * 更新角色
- */
-export function updateRole(params) {
-  return httpRequest.get(`/api/live/admin/v2/role/${params.role_id}/update`, { params })
-}
-/**
- * 获取角色详情
- */
-export function getRoleDetails(params) {
-  return httpRequest.get(`/api/live/admin/v2/role/${params.role_id}/detail`, { params })
-}
-/**
- * 删除
- */
-export function deleteRole(params) {
-  return httpRequest.get(`/api/live/admin/v2/role/${params.role_id}/delete`, { params })
-}
-/**
- * 获取角色列表
- */
-export function getRoles(params) {
-  return httpRequest.get('/api/live/admin/v2/roles', { params })
-}
-/**
- * 分配角色给用户
- */
-export function roleToUser(data) {
-  return httpRequest.post('/api/live/admin/v2/assign/roles-to-user', data)
-}
-/**
- * 获取角色下的用户列表
- */
-export function getUserListUnderRole(params) {
-  return httpRequest.get(`/api/live/admin/v2/role/${params.role_id}/users`, { params })
-}
-/**
- * 从角色中移除用户
- */
-export function romoveUserUnderRole(data) {
-  return httpRequest.post('/api/live/admin/v2/assign/remove-user-form-role', data)
-}
-/**
- * 获取权限列表
- */
-export function getPermissions(params) {
-  return httpRequest.get('/api/live/admin/v2/permissions', { params })
-}
-/**
- * 分配权限给角色
- */
-export function permissionToRole(data) {
-  return httpRequest.post('/api/live/admin/v2/assign/permission-to-role', data)
-}

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import routes from './routes'
-
 Vue.use(Router)
-const originalPush = Router.prototype.push
-Router.prototype.push = function push(location, onResolve, onReject) {
-  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
-  return originalPush.call(this, location).catch(err => err)
-}
-export default new Router({
-  routes,
-  mode: 'history', // 还有一个 hash 默认
-  fallback: true // 浏览器不支持 history时，自动改成 hash方式
+
+export const asyncRoutes = [...routes]
+const createRouter = () => new Router({
+  mode: 'history', // require service support
+  scrollBehavior: () => ({ y: 0 }),
+  routes: routes
 })
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router

src/router/routes.js

@@ -17,19 +17,19 @@ export default [
         path: 'ads',
         name: 'Ads',
         component: () => import('@/pages/content-manage/ads/index'),
-        meta: { title: '广告列表', icon: '', roles: ['content-menu-advert-list'] }
+        meta: { title: '广告列表', icon: '', roles: ['content-menu-advert-list'], permission: 'content-menu-advert-list' }
       },
       {
         path: 'article',
         name: 'Article',
         component: () => import('@/pages/content-manage/article/index'),
-        meta: { title: '文章列表', icon: '', roles: ['content-menu-acticle-list'] }
+        meta: { title: '文章列表', icon: '', roles: ['content-menu-acticle-list'], permission: '1' }
       },
       {
         path: 'image-text',
         name: 'ImageText',
         component: () => import('@/pages/content-manage/image-text/index'),
-        meta: { title: '图文列表', icon: '', roles: ['content-menu-imgtext-list'] }
+        meta: { title: '图文列表', icon: '', roles: ['content-menu-imgtext-list'], permission: '2' }
       }
     ]
   },
@@ -44,25 +44,25 @@ export default [
         path: 'staff',
         name: 'Staff',
         component: () => import('@/pages/settings/staff/index'),
-        meta: { title: '员工管理', icon: '', roles: ['setting-menu-user-manage'] }
+        meta: { title: '员工管理', icon: '', roles: ['setting-menu-user-manage'], permission: '' }
       },
       {
         path: 'project',
         name: 'Project',
         component: () => import('@/pages/settings/project/index'),
-        meta: { title: '项目管理', icon: '', roles: ['setting-menu-project-manage'] }
+        meta: { title: '项目管理', icon: '', roles: ['setting-menu-project-manage'], permission: '' }
       },
       {
         path: 'type',
         name: 'Type',
         component: () => import('@/pages/settings/type/index'),
-        meta: { title: '类型管理', icon: '', roles: ['setting-menu-type-manage'] }
+        meta: { title: '类型管理', icon: '', roles: ['setting-menu-type-manage'], permission: '' }
       },
       {
         path: 'role',
         name: 'Role',
         component: () => import('@/pages/settings/role/index'),
-        meta: { title: '高级设置', icon: '', roles: ['setting-menu-advanced-setting'] }
+        meta: { title: '高级设置', icon: '', roles: ['setting-menu-advanced-setting'], permission: '' }
       }
     ]
   },

src/store/getters.js

 const getters = {
   user: state => state.user.user,
   roles: state => state.user.roles,
-  isSuperAdmin: state => state.user.isSuperAdmin,
   sidebar: state => state.app.sidebar
 }
 export default getters

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
 import user from './modules/user'
+import permission from './modules/permission'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -10,7 +11,8 @@ const store = new Vuex.Store({
   namespaced: true,
   modules: {
     app,
-    user
+    user,
+    permission
   },
   getters
 })

src/store/modules/permission.js

+import { asyncRoutes } from '@/router'
+
+/**
+ * Use meta.role to determine if the current user has permission
+ * @param permissions
+ * @param route
+ */
+function hasPermission(permissions, route) {
+  if (route.meta && route.meta.permission) {
+    return permissions.includes(route.meta.permission)
+  } else {
+    return true
+  }
+}
+/**
+ * Use meta.role to determine if the current user has permission
+ * @param roles
+ * @param route
+ */
+function hasRole(roles, route) {
+  if (route.meta && route.meta.roles) {
+    return roles.some(role => route.meta.roles.includes(role))
+  } else {
+    return true
+  }
+}
+
+/**
+ * Filter asynchronous routing tables by recursion
+ * @param routes asyncRoutes
+ * @param roles
+ * @param type
+ */
+export function filterAsyncRoutes(routes, list, type) {
+  const res = []
+  routes.forEach(route => {
+    const tmp = { ...route }
+    if (type === 'role') {
+      if (hasRole(list, tmp)) {
+        if (tmp.children) {
+          tmp.children = filterAsyncRoutes(tmp.children, list, type)
+        }
+        res.push(tmp)
+      }
+    } else {
+      if (hasPermission(list, tmp)) {
+        if (tmp.children) {
+          tmp.children = filterAsyncRoutes(tmp.children, list, type)
+        }
+        res.push(tmp)
+      }
+    }
+  })
+  return res
+}
+
+const state = {
+  routes: [],
+  addRoutes: []
+}
+
+const mutations = {
+  SET_ROUTES: (state, routes) => {
+    state.addRoutes = routes
+    state.routes = [].concat(routes)
+  }
+}
+
+const actions = {
+  routesByRoles({ commit }, roles) {
+    return new Promise(resolve => {
+      let accessedRoutes
+      if (roles.includes('administrator')) {
+        accessedRoutes = asyncRoutes || []
+      } else {
+        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles, 'role')
+      }
+      commit('SET_ROUTES', accessedRoutes)
+      resolve(accessedRoutes)
+    })
+  },
+  routesByPermissions({ commit }, permissions) {
+    // console.log(permissions)
+    return new Promise(resolve => {
+      const accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions, 'permission')
+      commit('SET_ROUTES', accessedRoutes)
+      resolve(accessedRoutes)
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/user.js

 import { getUser, logout } from '@/api/account'
-import { getUserRoles } from '@/api/system'
+import { getUserRolesPermissions } from '@/api/system'
+import router, { resetRouter } from '@/router'
 const user = {
   state: {
     user: {},
-    roles: [],
     isLogin: false,
-    isSuperAdmin: false
+    hasRolesPermissions: false,
+    roles: [],
+    permissions: []
   },
 
   mutations: {
@@ -18,35 +20,21 @@ const user = {
     setRoles(state, roles) {
       state.roles = roles
     },
-    setSuperAdmin(state, isSuperAdmin) {
-      state.isSuperAdmin = isSuperAdmin
+    setPermissions(state, permissions) {
+      state.permissions = permissions
+    },
+    setHasRolesPermissions(state, hasRolesPermissions) {
+      state.hasRolesPermissions = hasRolesPermissions
     }
   },
 
   actions: {
-    getUser({ commit }) {
-      getUser().then(response => {
-        commit('setUser', response)
-      })
-    },
-    setUserRoles({ commit }) {
-      getUserRoles().then(res => {
-        const roles = res.data.roles
-        let isSuperAdmin = false
-        if (roles && Array.isArray(roles)) {
-          roles.forEach(it => {
-            if (it.name === 'administrator') isSuperAdmin = true
-          })
-          commit('setRoles', roles)
-          commit('setSuperAdmin', isSuperAdmin)
-        }
-      })
-    },
     // 退出登录
     logout({ commit }) {
       return logout().then(response => {
         commit('setUser', {})
         commit('setIsLogin', false)
+        resetRouter()
         return response
       })
     },
@@ -69,6 +57,42 @@ const user = {
         })
       commit('setIsLogin', isLogin)
       return isLogin
+    },
+    // dynamically modify permissions
+    async asyncRouters({ commit, dispatch }, data) {
+      resetRouter()
+      const roles = this.roles
+      console.log(roles)
+      // generate accessible routes map based on roles
+      const accessRoutes = await dispatch('permission/routesByPermissions', roles, { root: true })
+      // dynamically add accessible routes
+      router.addRoutes(accessRoutes)
+    },
+    // 检测登录状态
+    async checkRolesPermissions({ commit }) {
+      const hasRolesPermissions = await getUserRolesPermissions().then(res => {
+        const data = res.data
+        let rolePermissionCount = 0
+        if (data.roles && Array.isArray(data.roles)) {
+          const roles = data.roles.forEach(it => it.name)
+          commit('setRoles', roles)
+          rolePermissionCount++
+        }
+        if (data.permissions && Array.isArray(data.permissions)) {
+          rolePermissionCount++
+          commit('setPermissions', data.permissions)
+        }
+        return rolePermissionCount === 2
+      }).catch(() => {
+        commit('setRoles', [])
+        commit('setPermissions', [])
+        return false
+      })
+      commit('setHasRolesPermissions', hasRolesPermissions)
+      // if (hasRolesPermissions) {
+      //   this.asyncRouters()
+      // }
+      return hasRolesPermissions
     }
   }
 }

src/utils/axios.js

@@ -43,10 +43,12 @@ httpRequest.interceptors.response.use(
       window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
       return Promise.reject(data)
     }
+    if (data.code === 403) {
+      router.push('/error-page/401')
+    }
     return data
   },
   function(error) {
-    console.log(error)
     if (error.response) {
       const { status, message, code } = error.response.data
       // 未登录

src/utils/beforeEnter.js

 import store from '@/store'
-
+import router, { resetRouter } from '@/router'
 export default class BeforeEnter {
   constructor(opt) {
     this.opt = opt || {}
   }
 
   async update(to, from, next) {
-    const isLogin = store.state.isLogin || (await store.dispatch('checkLogin'))
-    if (to.meta.requiredLogin && !isLogin) {
-      next(`/login?redirect_uri=${encodeURIComponent(window.location.href)}`)
+    const isLogin = store.state.user.isLogin || (await store.dispatch('checkLogin'))
+    if (!isLogin) {
+      window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
       return
+    } else {
+      const hasPermissions = store.state.user.permissions && store.state.user.permissions.length > 0
+      if (hasPermissions) {
+        next()
+      } else {
+        // console.log(1234444)
+        await store.dispatch('checkRolesPermissions')
+        const permissions = store.state.user.permissions
+        // 基于权限获取可接入的路由
+        const accessRoutes = await store.dispatch('permission/routesByPermissions', permissions)
+        // 重新设置路由
+        resetRouter()
+        // dynamically add accessible routes
+        router.addRoutes(accessRoutes)
+        // hack method to ensure that addRoutes is complete
+        // set the replace: true, so the navigation will not leave a history record
+        next({ ...to, replace: true })
+      }
     }
-    store.dispatch('setUserRoles')
+    // store.dispatch('setUserRoles')
     next()
   }
 }