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

refactor: remove_permission-control

src/permission.js

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

src/router/index.js

@@ -8,13 +8,13 @@ import Layout from '../views/layout/Layout'
 
 Vue.use(Router)
 
- /**
-  * icon : the icon show in the sidebar
-  * hidden : if `hidden:true` will not show in the sidebar
-  * redirect : if `redirect:noredirect` will not redirct in the levelbar
-  * noDropdown : if `noDropdown:true` will not has submenu in the sidebar
-  * meta : `{ role: ['admin'] }`  will control the page role
-  **/
+/**
+* icon : the icon show in the sidebar
+* hidden : if `hidden:true` will not show in the sidebar
+* redirect : if `redirect:noredirect` will not redirct in the levelbar
+* noDropdown : if `noDropdown:true` will not has submenu in the sidebar
+* meta : `{ role: ['admin'] }`  will control the page role
+**/
 export const constantRouterMap = [
   { path: '/login', component: _import('login/index'), hidden: true },
   { path: '/404', component: _import('404'), hidden: true },
@@ -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
+})
+

src/store/getters.js

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

src/store/index.js

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

src/store/modules/permission.js

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

src/views/layout/Sidebar.vue

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

src/views/login/index.vue

@@ -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>
-       <el-form-item prop="username">
+      <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>
+          <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 }],