refactor: remove_permission-control
This commit is contained in:
		@@ -4,7 +4,7 @@ import NProgress from 'nprogress' // Progress 进度条
 | 
				
			|||||||
import 'nprogress/nprogress.css'// Progress 进度条样式
 | 
					import 'nprogress/nprogress.css'// Progress 进度条样式
 | 
				
			||||||
import { getToken } from '@/utils/auth' // 验权
 | 
					import { getToken } from '@/utils/auth' // 验权
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const whiteList = ['/login']
 | 
					const whiteList = ['/login'] // 不重定向白名单
 | 
				
			||||||
router.beforeEach((to, from, next) => {
 | 
					router.beforeEach((to, from, next) => {
 | 
				
			||||||
  NProgress.start()
 | 
					  NProgress.start()
 | 
				
			||||||
  if (getToken()) {
 | 
					  if (getToken()) {
 | 
				
			||||||
@@ -12,12 +12,8 @@ router.beforeEach((to, from, next) => {
 | 
				
			|||||||
      next({ path: '/' })
 | 
					      next({ path: '/' })
 | 
				
			||||||
    } else {
 | 
					    } else {
 | 
				
			||||||
      if (store.getters.roles.length === 0) {
 | 
					      if (store.getters.roles.length === 0) {
 | 
				
			||||||
        store.dispatch('GetInfo').then(res => {
 | 
					        store.dispatch('GetInfo').then(res => { // 拉取用户信息
 | 
				
			||||||
          const roles = res.data.role
 | 
					          next()
 | 
				
			||||||
          store.dispatch('GenerateRoutes', { roles }).then(() => {
 | 
					 | 
				
			||||||
            router.addRoutes(store.getters.addRouters)
 | 
					 | 
				
			||||||
            next({ ...to })
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
        })
 | 
					        })
 | 
				
			||||||
      } else {
 | 
					      } else {
 | 
				
			||||||
        next()
 | 
					        next()
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -25,16 +25,8 @@ export const constantRouterMap = [
 | 
				
			|||||||
    name: 'Dashboard',
 | 
					    name: 'Dashboard',
 | 
				
			||||||
    hidden: true,
 | 
					    hidden: true,
 | 
				
			||||||
    children: [{ path: 'dashboard', component: _import('dashboard/index') }]
 | 
					    children: [{ path: 'dashboard', component: _import('dashboard/index') }]
 | 
				
			||||||
  }
 | 
					  },
 | 
				
			||||||
]
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default new Router({
 | 
					 | 
				
			||||||
  // mode: 'history', //后端支持可开
 | 
					 | 
				
			||||||
  scrollBehavior: () => ({ y: 0 }),
 | 
					 | 
				
			||||||
  routes: constantRouterMap
 | 
					 | 
				
			||||||
})
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export const asyncRouterMap = [
 | 
					 | 
				
			||||||
  {
 | 
					  {
 | 
				
			||||||
    path: '/example',
 | 
					    path: '/example',
 | 
				
			||||||
    component: Layout,
 | 
					    component: Layout,
 | 
				
			||||||
@@ -57,3 +49,10 @@ export const asyncRouterMap = [
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
  { path: '*', redirect: '/404', hidden: true }
 | 
					  { path: '*', redirect: '/404', hidden: true }
 | 
				
			||||||
]
 | 
					]
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default new Router({
 | 
				
			||||||
 | 
					  // mode: 'history', //后端支持可开
 | 
				
			||||||
 | 
					  scrollBehavior: () => ({ y: 0 }),
 | 
				
			||||||
 | 
					  routes: constantRouterMap
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -3,8 +3,6 @@ const getters = {
 | 
				
			|||||||
  token: state => state.user.token,
 | 
					  token: state => state.user.token,
 | 
				
			||||||
  avatar: state => state.user.avatar,
 | 
					  avatar: state => state.user.avatar,
 | 
				
			||||||
  name: state => state.user.name,
 | 
					  name: state => state.user.name,
 | 
				
			||||||
  roles: state => state.user.roles,
 | 
					  roles: state => state.user.roles
 | 
				
			||||||
  permission_routers: state => state.permission.routers,
 | 
					 | 
				
			||||||
  addRouters: state => state.permission.addRouters
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
export default getters
 | 
					export default getters
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,7 +2,6 @@ import Vue from 'vue'
 | 
				
			|||||||
import Vuex from 'vuex'
 | 
					import Vuex from 'vuex'
 | 
				
			||||||
import app from './modules/app'
 | 
					import app from './modules/app'
 | 
				
			||||||
import user from './modules/user'
 | 
					import user from './modules/user'
 | 
				
			||||||
import permission from './modules/permission'
 | 
					 | 
				
			||||||
import getters from './getters'
 | 
					import getters from './getters'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Vue.use(Vuex)
 | 
					Vue.use(Vuex)
 | 
				
			||||||
@@ -10,8 +9,7 @@ Vue.use(Vuex)
 | 
				
			|||||||
const store = new Vuex.Store({
 | 
					const store = new Vuex.Store({
 | 
				
			||||||
  modules: {
 | 
					  modules: {
 | 
				
			||||||
    app,
 | 
					    app,
 | 
				
			||||||
    user,
 | 
					    user
 | 
				
			||||||
    permission
 | 
					 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  getters
 | 
					  getters
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,62 +0,0 @@
 | 
				
			|||||||
import { asyncRouterMap, constantRouterMap } from '@/router/index'
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/**
 | 
					 | 
				
			||||||
 * 通过meta.role判断是否与当前用户权限匹配
 | 
					 | 
				
			||||||
 * @param roles
 | 
					 | 
				
			||||||
 * @param route
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
function hasPermission(roles, route) {
 | 
					 | 
				
			||||||
  if (route.meta && route.meta.role) {
 | 
					 | 
				
			||||||
    return roles.some(role => route.meta.role.indexOf(role) >= 0)
 | 
					 | 
				
			||||||
  } else {
 | 
					 | 
				
			||||||
    return true
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/**
 | 
					 | 
				
			||||||
 * 递归过滤异步路由表,返回符合用户角色权限的路由表
 | 
					 | 
				
			||||||
 * @param asyncRouterMap
 | 
					 | 
				
			||||||
 * @param roles
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
function filterAsyncRouter(asyncRouterMap, roles) {
 | 
					 | 
				
			||||||
  const accessedRouters = asyncRouterMap.filter(route => {
 | 
					 | 
				
			||||||
    if (hasPermission(roles, route)) {
 | 
					 | 
				
			||||||
      if (route.children && route.children.length) {
 | 
					 | 
				
			||||||
        route.children = filterAsyncRouter(route.children, roles)
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      return true
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    return false
 | 
					 | 
				
			||||||
  })
 | 
					 | 
				
			||||||
  return accessedRouters
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const permission = {
 | 
					 | 
				
			||||||
  state: {
 | 
					 | 
				
			||||||
    routers: constantRouterMap,
 | 
					 | 
				
			||||||
    addRouters: []
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  mutations: {
 | 
					 | 
				
			||||||
    SET_ROUTERS: (state, routers) => {
 | 
					 | 
				
			||||||
      state.addRouters = routers
 | 
					 | 
				
			||||||
      state.routers = constantRouterMap.concat(routers)
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  actions: {
 | 
					 | 
				
			||||||
    GenerateRoutes({ commit }, data) {
 | 
					 | 
				
			||||||
      return new Promise(resolve => {
 | 
					 | 
				
			||||||
        const { roles } = data
 | 
					 | 
				
			||||||
        let accessedRouters
 | 
					 | 
				
			||||||
        if (roles.indexOf('admin') >= 0) {
 | 
					 | 
				
			||||||
          accessedRouters = asyncRouterMap
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        commit('SET_ROUTERS', accessedRouters)
 | 
					 | 
				
			||||||
        resolve()
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default permission
 | 
					 | 
				
			||||||
@@ -1,18 +1,17 @@
 | 
				
			|||||||
<template>
 | 
					<template>
 | 
				
			||||||
  <el-menu mode="vertical" theme="dark" :default-active="$route.path">
 | 
					  <el-menu mode="vertical" theme="dark" :default-active="$route.path">
 | 
				
			||||||
    <sidebar-item :routes='permission_routers'></sidebar-item>
 | 
					    <sidebar-item :routes="routes"></sidebar-item>
 | 
				
			||||||
  </el-menu>
 | 
					  </el-menu>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script>
 | 
					<script>
 | 
				
			||||||
import { mapGetters } from 'vuex'
 | 
					 | 
				
			||||||
import SidebarItem from './SidebarItem'
 | 
					import SidebarItem from './SidebarItem'
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  components: { SidebarItem },
 | 
					  components: { SidebarItem },
 | 
				
			||||||
  computed: {
 | 
					  computed: {
 | 
				
			||||||
    ...mapGetters([
 | 
					    routes() {
 | 
				
			||||||
      'permission_routers'
 | 
					      return this.$router.options.routes
 | 
				
			||||||
    ])
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,27 +2,29 @@
 | 
				
			|||||||
  <div class="login-container">
 | 
					  <div class="login-container">
 | 
				
			||||||
    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
 | 
					    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
 | 
				
			||||||
      class="card-box login-form">
 | 
					      class="card-box login-form">
 | 
				
			||||||
      <h3 class="title">系统登录</h3>
 | 
					      <h3 class="title">vue-element-admin</h3>
 | 
				
			||||||
      <el-form-item prop="username">
 | 
					      <el-form-item prop="username">
 | 
				
			||||||
        <span class="svg-container svg-container_login">
 | 
					        <span class="svg-container svg-container_login">
 | 
				
			||||||
          <icon-svg icon-class="yonghuming" />
 | 
					          <icon-svg icon-class="yonghuming" />
 | 
				
			||||||
        </span>
 | 
					        </span>
 | 
				
			||||||
        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
 | 
					        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
 | 
				
			||||||
      </el-form-item>
 | 
					      </el-form-item>
 | 
				
			||||||
      <el-form-item prop="password">
 | 
					      <el-form-item prop="password">
 | 
				
			||||||
        <span class="svg-container">
 | 
					        <span class="svg-container">
 | 
				
			||||||
          <icon-svg icon-class="mima"></icon-svg>
 | 
					          <icon-svg icon-class="mima"></icon-svg>
 | 
				
			||||||
        </span>
 | 
					        </span>
 | 
				
			||||||
        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
 | 
					        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
 | 
				
			||||||
          placeholder="密码"></el-input>
 | 
					          placeholder="password"></el-input>
 | 
				
			||||||
      </el-form-item>
 | 
					      </el-form-item>
 | 
				
			||||||
      <el-form-item>
 | 
					      <el-form-item>
 | 
				
			||||||
        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
 | 
					        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
 | 
				
			||||||
          登录
 | 
					          Sign in
 | 
				
			||||||
        </el-button>
 | 
					        </el-button>
 | 
				
			||||||
      </el-form-item>
 | 
					      </el-form-item>
 | 
				
			||||||
      <div class='tips'>账号:admin 密码随便填</div>
 | 
					      <div class='tips'>
 | 
				
			||||||
      <div class='tips'>账号:editor  密码随便填</div>
 | 
					        <span style="margin-right:20px;">username: admin</span>
 | 
				
			||||||
 | 
					        </span> password: admin</span>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
    </el-form>
 | 
					    </el-form>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
@@ -41,8 +43,8 @@ export default {
 | 
				
			|||||||
      }
 | 
					      }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    const validatePass = (rule, value, callback) => {
 | 
					    const validatePass = (rule, value, callback) => {
 | 
				
			||||||
      if (value.length < 6) {
 | 
					      if (value.length < 5) {
 | 
				
			||||||
        callback(new Error('密码不能小于6位'))
 | 
					        callback(new Error('密码不能小于5位'))
 | 
				
			||||||
      } else {
 | 
					      } else {
 | 
				
			||||||
        callback()
 | 
					        callback()
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
@@ -50,7 +52,7 @@ export default {
 | 
				
			|||||||
    return {
 | 
					    return {
 | 
				
			||||||
      loginForm: {
 | 
					      loginForm: {
 | 
				
			||||||
        username: 'admin',
 | 
					        username: 'admin',
 | 
				
			||||||
        password: '111111'
 | 
					        password: 'admin'
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      loginRules: {
 | 
					      loginRules: {
 | 
				
			||||||
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
 | 
					        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user