feat(index): 登录权限改造

duizhaopin_ui
duan 2 years ago
parent 1acd37d881
commit 3b0ce964b9

@ -9,11 +9,12 @@
</el-badge> </el-badge>
<el-select v-model="$store.state.user.classification" placeholder="请选择" @change="selectChange"> <el-select v-model="$store.state.user.classification" placeholder="请选择" @change="selectChange">
<el-option <el-option
v-for="item in options" v-for="item in $store.getters.opts"
:key="item.value" :key="item.title"
:label="item.label" :label="item.title"
:value="item.value" :value="item.name"
/> />
<el-option value="loginout" label="注销登录" />
</el-select> </el-select>
</div> </div>
</div> </div>
@ -47,21 +48,7 @@ export default {
obj: { obj: {
'background-image': 'url(' + require('@/assets/3-主概览/主概览背景.png') + ')', 'background-image': 'url(' + require('@/assets/3-主概览/主概览背景.png') + ')',
'background-size': '100%' 'background-size': '100%'
},
options: [
{
value: 'reagent',
label: '试剂管理'
},
{
value: 'user',
label: '用户管理'
},
{
value: 'loginout',
label: '注销登录'
} }
]
} }
}, },
methods: { methods: {
@ -75,7 +62,7 @@ export default {
this.$router.push('/login') this.$router.push('/login')
return return
} }
this.$router.push('/' + val) this.$router.push(this.$store.getters.opts.find(item => item.name === val).router.path)
} }
} }
} }

@ -1,10 +1,10 @@
import router, { asyncRoutes, resetRouter } from './router' import router, { resetRouter } from './router'
import store from './store' import store from './store'
// import { Message } from 'element-ui' // import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title' import getPageTitle from '@/utils/get-page-title'
import { filterAsyncRoutes } from '@/utils' import { filterAsyncRoutes, getALLRouter } from '@/utils'
NProgress.configure({ showSpinner: false }) // NProgress Configuration NProgress.configure({ showSpinner: false }) // NProgress Configuration
@ -44,11 +44,9 @@ router.beforeEach(async(to, from, next) => {
next() next()
} else { } else {
store.commit('user/SET_CLASS', pat) store.commit('user/SET_CLASS', pat)
const asr = filterAsyncRoutes(asyncRoutes, store.getters.roleData.drug_manage) const { asyncRoutes } = getALLRouter(store.getters.roleData)
// store.commit('permission/SET_ROUTES', asr)
// store.commit('permission/SET_ROUTES', asyncRoutes)
resetRouter() resetRouter()
router.addRoutes(asr) router.addRoutes(asyncRoutes)
next({ ...to, replace: true }) next({ ...to, replace: true })
} }
} }

@ -4,8 +4,6 @@ import Router from 'vue-router'
Vue.use(Router) Vue.use(Router)
/* Layout */ /* Layout */
import reagentRouter from './modules/reagent'
import userRouter from '@/router/modules/user'
import Layout from '@/layout' import Layout from '@/layout'
/** /**
@ -68,12 +66,6 @@ export const constantRoutes = [
} }
] ]
export const asyncRoutes = [
...reagentRouter,
...userRouter,
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({ const createRouter = () => new Router({
// mode: 'history', // require service support // mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),

@ -5,8 +5,10 @@ const getters = {
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
name: state => state.user.name, name: state => state.user.name,
permission_routes: state => state.permission.routes, permission_routes: state => state.permission.routes,
add_routers: state => state.permission.addRoutes,
classification: state => state.user.classification, classification: state => state.user.classification,
isMain: state => state.settings.isMain, isMain: state => state.settings.isMain,
roleData: state => state.permission.roleData roleData: state => state.permission.roleData,
opts: state => state.permission.opts
} }
export default getters export default getters

@ -1,43 +1,13 @@
import { asyncRoutes, constantRoutes } from '@/router' import router, { constantRoutes } from '@/router'
import { user_power } from '@/api/user/user'
/** import { getALLRouter } from '@/utils'
* Use meta.role to determine if the current userinfo has permission
* @param roles
* @param route
*/
function hasPermission(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
*/
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
const state = { const state = {
routes: [], routes: [],
addRoutes: [], addRoutes: [],
roleData: {} // 存储home页区块路由下拉选项路由
roleData: {},
opts: []
} }
const mutations = { const mutations = {
@ -47,20 +17,25 @@ const mutations = {
}, },
SET_ROLE_DATA: (state, data) => { SET_ROLE_DATA: (state, data) => {
state.roleData = data state.roleData = data
},
SET_OPTS: (state, opt) => {
state.opts = opt
} }
} }
const actions = { const actions = {
generateRoutes({ commit }, roles) { generateRoutes({ commit }) {
return new Promise(resolve => { return new Promise((resolve, reject) => {
let accessedRoutes user_power().then(res => {
if (roles.includes('admin')) { const { asyncRoutes, option } = getALLRouter(res.data)
accessedRoutes = asyncRoutes || [] commit('SET_OPTS', option)
} else { commit('SET_ROLE_DATA', res.data)
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) commit('SET_ROUTES', asyncRoutes)
} router.addRoutes(asyncRoutes)
commit('SET_ROUTES', accessedRoutes) resolve()
resolve(accessedRoutes) }).catch(error => {
reject(error)
})
}) })
} }
} }

@ -2,6 +2,9 @@
* Created by PanJiaChen on 16/11/18. * Created by PanJiaChen on 16/11/18.
*/ */
import reagentRouter from '@/router/modules/reagent'
import userRouter from '@/router/modules/user'
/** /**
* Parse the time to string * Parse the time to string
* @param {(Object|string|number)} time * @param {(Object|string|number)} time
@ -151,9 +154,6 @@ export function throttle(fn, time) {
export function filterAsyncRoutes(routers, roles) { export function filterAsyncRoutes(routers, roles) {
return routers.filter(item => { return routers.filter(item => {
if (item.path === '*') {
return true
}
if (item.meta && item.meta.title === '返回主页') { if (item.meta && item.meta.title === '返回主页') {
return true return true
} }
@ -161,3 +161,28 @@ export function filterAsyncRoutes(routers, roles) {
}) })
} }
export function getALLRouter(data) {
// TODO 其他路由都在此操作
const rasr = filterAsyncRoutes(reagentRouter, data.drug_manage)
const uasr = filterAsyncRoutes(userRouter, data.drug_manage)
const asyncRoutes = [
...rasr,
...uasr,
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
const option = [
{
name: 'reagent',
router: rasr[0],
title: '试剂管理'
},
{
name: 'user',
router: uasr[0],
title: '用户管理'
}
]
return { asyncRoutes, option }
}

@ -7,11 +7,11 @@
</div> </div>
<div class="home-content"> <div class="home-content">
<div class="home-pic"> <div class="home-pic">
<div class="home-pic-item" @click="picClick('/reagent')"><img src="@/assets/2-主界面/试剂管理.png" alt=""></div> <div class="home-pic-item" @click="picClick('reagent')"><img src="@/assets/2-主界面/试剂管理.png" alt=""></div>
<div key="2" class="home-pic-item"><img src="@/assets/2-主界面/标准品管理.png" alt=""></div> <div key="2" class="home-pic-item"><img src="@/assets/2-主界面/标准品管理.png" alt=""></div>
<div key="3" class="home-pic-item"><img src="@/assets/2-主界面/耗材管理.png" alt=""></div> <div key="3" class="home-pic-item"><img src="@/assets/2-主界面/耗材管理.png" alt=""></div>
<div key="4" class="home-pic-item"><img src="@/assets/2-主界面/仪器管理.png" alt=""></div> <div key="4" class="home-pic-item"><img src="@/assets/2-主界面/仪器管理.png" alt=""></div>
<div key="5" class="home-pic-item" @click="picClick('/user')"><img src="@/assets/2-主界面/用户管理.png" alt=""></div> <div key="5" class="home-pic-item" @click="picClick('user')"><img src="@/assets/2-主界面/用户管理.png" alt=""></div>
</div> </div>
<div class="home-menu"> <div class="home-menu">
<div v-for="item in 9" :key="item" class="home-menu-item"> <div v-for="item in 9" :key="item" class="home-menu-item">
@ -28,7 +28,8 @@ export default {
name: 'Home', name: 'Home',
methods: { methods: {
picClick(name) { picClick(name) {
this.$router.push(name) const r = this.$store.getters.opts.find(item => item.name === name)
this.$router.push(r.router.path)
} }
} }
} }

@ -70,9 +70,8 @@
<script> <script>
// import { validUsername } from '@/utils/validate' // import { validUsername } from '@/utils/validate'
import stringify from '@/utils/stringify' import stringify from '@/utils/stringify'
import { login, user_power } from '@/api/user/user' import { login } from '@/api/user/user'
import { asyncRoutes } from '@/router'
import { filterAsyncRoutes } from '@/utils'
export default { export default {
name: 'Login', name: 'Login',
data() { data() {
@ -132,17 +131,8 @@ export default {
this.loading = true this.loading = true
login(stringify(this.loginForm)).then(res => { login(stringify(this.loginForm)).then(res => {
this.$store.commit('user/SET_TOKEN', res.data.token) this.$store.commit('user/SET_TOKEN', res.data.token)
// this.$store.commit('permission/SET_ROUTES', asyncRoutes) this.$store.dispatch('permission/generateRoutes')
// this.$router.addRoutes(asyncRoutes)
// this.$router.replace('/home')
user_power().then(resp => {
//
this.$store.commit('permission/SET_ROLE_DATA', resp.data)
const asr = filterAsyncRoutes(asyncRoutes, resp.data.drug_manage)
this.$store.commit('permission/SET_ROUTES', asr)
this.$router.addRoutes(asr)
this.$router.replace('/home') this.$router.replace('/home')
})
}).finally( }).finally(
() => { () => {
this.loading = false this.loading = false

Loading…
Cancel
Save