Merge pull request #23 from PanJiaChen/refactor/remove_permission-control

refactor: remove_permission-control
This commit is contained in:
花裤衩 2017-10-18 02:24:12 -05:00 committed by GitHub
commit 48043c12ca
7 changed files with 37 additions and 107 deletions

View File

@ -4,7 +4,7 @@ import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { getToken } from '@/utils/auth' // 验权
const whiteList = ['/login']
const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
@ -12,12 +12,8 @@ router.beforeEach((to, from, next) => {
next({ path: '/' })
} else {
if (store.getters.roles.length === 0) {
store.dispatch('GetInfo').then(res => {
const roles = res.data.role
store.dispatch('GenerateRoutes', { roles }).then(() => {
router.addRoutes(store.getters.addRouters)
next({ ...to })
})
store.dispatch('GetInfo').then(res => { // 拉取用户信息
next()
})
} else {
next()

View File

@ -25,16 +25,8 @@ export const constantRouterMap = [
name: 'Dashboard',
hidden: true,
children: [{ path: 'dashboard', component: _import('dashboard/index') }]
}
]
},
export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
export const asyncRouterMap = [
{
path: '/example',
component: Layout,
@ -57,3 +49,10 @@ export const asyncRouterMap = [
{ path: '*', redirect: '/404', hidden: true }
]
export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})

View File

@ -3,8 +3,6 @@ const getters = {
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
roles: state => state.user.roles,
permission_routers: state => state.permission.routers,
addRouters: state => state.permission.addRouters
roles: state => state.user.roles
}
export default getters

View File

@ -2,7 +2,6 @@ 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,8 +9,7 @@ Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
user,
permission
user
},
getters
})

View File

@ -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

View File

@ -1,18 +1,17 @@
<template>
<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>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
components: { SidebarItem },
computed: {
...mapGetters([
'permission_routers'
])
routes() {
return this.$router.options.routes
}
}
}
</script>

View File

@ -2,27 +2,29 @@
<div class="login-container">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
class="card-box login-form">
<h3 class="title">系统登录</h3>
<h3 class="title">vue-element-admin</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<icon-svg icon-class="yonghuming" />
</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 prop="password">
<span class="svg-container">
<icon-svg icon-class="mima"></icon-svg>
</span>
<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-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
Sign in
</el-button>
</el-form-item>
<div class='tips'>账号:admin 密码随便填</div>
<div class='tips'>账号:editor 密码随便填</div>
<div class='tips'>
<span style="margin-right:20px;">username: admin</span>
</span> password: admin</span>
</div>
</el-form>
</div>
</template>
@ -41,8 +43,8 @@ export default {
}
}
const validatePass = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码不能小于6位'))
if (value.length < 5) {
callback(new Error('密码不能小于5位'))
} else {
callback()
}
@ -50,7 +52,7 @@ export default {
return {
loginForm: {
username: 'admin',
password: '111111'
password: 'admin'
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],