效果演示
数据库设计
每一个用户都有一个用户id,为了对他们进行后台菜单的动态设计,即每个用户看到的的菜单是不一样的,那么我们就要为每一个用户规定一个角色,这就引入了role表,通过user_role的表建立联系。
同样的,每个角色看到不用的菜单,菜单由后端根据登录的角色向数据库查询生成,这就引入了menu表,用过role_menu的表建立联系。
我们插入几个数据:
path:代表前端路由的访问路径
component:代表前端路由所在的组件位置
前端设计
-
用户登录返回用户的角色id,存储在vuex中
login(){ var params = { username:this.username, password:this.password } this.$store.commit('setUserName',this.username) post('user/login',params).then(res => { this.$store.commit('setUserToken',res.token) //将返回的token存储在vuex中 this.$store.commit('setUserRole',res.rid) this.$router.replace('/admin') }) }
-
格式化后端返回的路由
当用户选择进入后台的时候,我们先要初始化后台的菜单,在main.js中写入:
router.beforeEach((to, from, next) => { if (store.state.username && (to.name == 'adminDashboard')) { axios.get('/user/getAuth').then(resp => { initAdminMenu(router, store) }) } if (to.meta.requireAuth) { axios.get('/user/getAuth').then(result => { if (result.data.code === 200) { next() } else { alert("您还未登录") next({ path: '/login' }) } }) } else { next() } } )
initAdmin.js方法如下:
import { get} from '@/utils/http' import { formatRoutes} from '@/utils/routerFormat' export default function initAdminMenu(router, store) { if (store.state.adminMenus.length > 0) { return } get('/menu/get/' + store.state.rid).then(resp => { var fmtRoutes = formatRoutes(resp) router.addRoutes(fmtRoutes) store.commit('initAdminMenu', fmtRoutes) }) }
routerFormat.js方法如下:
export function formatRoutes(routes){ let fmtRoutes = [] routes.forEach(routes => { if (routes.child) { routes.child = formatRoutes(routes.child) } let fmtRoute = { path: routes.path, component: resolve => { require(['@/components/admin/' + routes.component + '.vue'], resolve) }, name: routes.name, nameZh: routes.name_zh, iconCls: routes.icon, children: routes.child } fmtRoutes.push(fmtRoute) }) return fmtRoutes }
-
Vuex设置存储
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store