SpringBoot登录+CRUD整合:https://github.com/qycwudi/student_information_management_system
Element-UI整合权限+动态路由+自定义登录:https://github.com/qycwudi/vue_stu_sys/tree/master/vue-stu_sys
Element-UI整合权限动态路由过程
一、路由目录/router/index.vue‘
文件里面主要有俩个部分
- export const constantRoutes = [ 静态
-
export const asyncRoutes = [ 动态
想要根据权限不同显示目录不同,就需要在asyncRoutes里配置 roles: ['admin', 'instr'] (权限名字自己起)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/tongzhi',
meta: {
title: '学校通知', icon: 'el-icon-s-custom',
},
children: [{
path: 'tongzhi',
name: '通知',
component: () => import('@/views/tongzhi/tongzhi'),
meta: { title: '通知', icon: 'dashboard' }
},
{
path: 'tongzhi1',
name: '通知1',
component: () => import('@/views/tongzhi/tongzhi'),
meta: { title: '通知1', icon: 'dashboard' }
},
]
}
];
export const asyncRoutes = [
// 个人信息
{
path: '/user',
component: Layout,
// redirect: '/user/show', //默认路由
name: '信息管理',
meta: {
title: '信息管理', icon: 'el-icon-s-custom',
roles: ['admin', 'instr']
},
children: [
{
path: 'show',
name: '个人信息',
//转到页面
component: () => import('@/views/user/show'),
meta: {
title: '个人信息', icon: 'el-icon-s-custom'
,roles: ['admin']
}
},
{
path: 'show1',
name: '个人信息1',
//转到页面
component: () => import('@/views/user/show1'),
meta: {
title: '个人信息1', icon: 'el-icon-s-custom',
roles: ['instr']
}
},
{
path: 'show2',
name: '个人信息2',
//转到页面
component: () => import('@/views/user/show2'),
meta: {
title: '个人信息2', icon: 'el-icon-s-custom',
roles: ['instr']
}
},
]
},
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
});
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
二、从后台获取权限
我的解决方案是前台登录发出请求后,后台返回token,里面带有权限信息。然后前台想后台发送请求获取info,权限为列表返回
具体后台登录和获取info可以参考文章开头第一个链接的security_5010的Module,详细兄弟们不会嫌弃我写的乱的 哈哈哈
在这里主要说说前台如何获取权限信息
1.登录
/view/login/index.vue
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
console.log(this.loginForm.username)
console.log(this.loginForm.password)
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
调用store/modules/user.js
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
调用/api/sys/user.js
import request from '@/utils/request'
export function login(username,password) {
return request({
url: '/sec/log/logins',
method: 'post',
data:{
username,
password
}
})
}
export function getInfo(token) {
return request({
url: '/sec/log/info',
method: 'get',
params: { token }
})
}
export function logout() {
return request({
url: '/sec/log/logout',
method: 'post'
})
}
向后台发送登录请求,参数为username,password
@PostMapping("logins")
public R login(@RequestBody Map<String, Object> map){
System.out.println("user = " + map.toString());
Object users = new Object();
for (Map.Entry<String, Object> entry:map.entrySet()){
users = entry.getValue();
}
JSONObject jsonObject=JSONObject.fromObject(users); // 将数据转成json字符串
User per = (User) JSONObject.toBean(jsonObject, User.class); //将json转成需要的对象
System.out.println("per = " + per);
String token = bkStaffService.login(per);
System.out.println("token = " + token);
R r = R.ok();
if(token.equals("")){
return R.error();
}
r.data("token",token);
return r;
}
后台接收请求,这里有一个细节,vue传回的是map,要把数据在转成entry,然后转成json,然后再把json转成user对象。否则数据取不出来(可能是我理解的问题)
然后service进行逻辑处理,返回给controller层一个token串,然后传给前端。
然后进行src/permission.js
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
// get user info
const { roles } = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
router.addRoutes(accessRoutes)
// console.log(" store.getters.roles "+store.getters.roles)
// console.log(" store.getters.routers "+store.getters.routes[0].path)
// console.log(" store.getters.routers " + store.getters.routes[1].path)
// console.log(" store.getters.routers " + store.getters.routes[2].path)
// console.log(" store.getters.routers " + store.getters.routes[3].path)
// console.log(" store.getters.routers " + store.getters.routes[4].path)
// router.options.routes=store.getters.routers
next({ ...to,replace: true})
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
// Message.error(error || 'Has Error')
Message.error('Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
调用generateRoutes方法 /store/modules/permission.js
import router, { asyncRoutes, constantRoutes } from '@/router'
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
console.log("进入hasPermission if route" + route + " roles: " + roles)
return roles.some(role => route.meta.roles.includes(role))
} else {
console.log("进入hasPermission else route" + route + " roles: " + roles)
return true
}
}
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
console.log("进入循环routes:" + routes + " roles:" + roles)
if (hasPermission(roles, tmp)) {
console.log("进入循环hasPermission")
if (tmp.children) {
console.log("进入循环tmp.children")
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
console.log("res:" + res)
return res
}
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
console.log("进入SET_ROUTES: routes " + routes + " state: " + state)
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
console.log("routes:" + state.routes + " " + state.addRoutes)
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
console.log("进入generateRoutes:" + roles)
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = asyncRoutes || []
console.log("进入判断admin if:" + roles)
} else {
console.log("进入判断admin else:" + roles[0]+roles)
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
console.log("accessedRoutes:"+accessedRoutes)
resolve(accessedRoutes)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
向后台发送getInfo请求,获取信息。store/modules/user.js
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
}
}
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
reject('Verification failed, please Login again.')
}
const { roles, name, avatar, introduction } = data
// roles must be a non-empty array
if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!')
}
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
/store/getters.js
import { start } from "nprogress"
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
id: state => state.user.id,
roles: state => state.user.roles,
routes: state => state.permission.routes,
addRoutes: state => state.permission.addRoutes,
permission_routes: state => state.permission.routes
}
export default getters
三、修改渲染的动态路由
这是最关键的一步
/layout/components/Sidebar/index.vue
这个文件的作用是渲染侧边栏
<template>
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" >
</sidebar-item>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import store from '@/store'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters([
'permission_routes',
'sidebar'
]),
routes() {
// console.log("$router.options.routes:"+this.$router.options.routes[2].path)
// console.log(" store.getters.roles "+store.getters.roles)
// console.log(" store.getters.routers "+store.getters.routes[0].path)
// console.log(" store.getters.routers " + store.getters.routes[1].path)
// console.log(" store.getters.routers " + store.getters.routes[2].path)
// console.log(" store.getters.routers " + store.getters.routes[3].path)
// console.log(" store.getters.routers " + store.getters.routes[4].path)
return store.getters.routes
},
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
修改routes的返回值
routes() {
// console.log("$router.options.routes:"+this.$router.options.routes[2].path)
// console.log(" store.getters.roles "+store.getters.roles)
// console.log(" store.getters.routers "+store.getters.routes[0].path)
// console.log(" store.getters.routers " + store.getters.routes[1].path)
// console.log(" store.getters.routers " + store.getters.routes[2].path)
// console.log(" store.getters.routers " + store.getters.routes[3].path)
// console.log(" store.getters.routers " + store.getters.routes[4].path)
return store.getters.routes
},
PS
前面我只是列出了一些关键代码,具体我也忘记了还修改了哪些,所以请参照文章开始给的第二个链接进行修改,注释是当时修改源代码测试留下的,兄弟们可以参照打印出来的信息了解整个流程。