Vue + Element-ui实现后台管理系统(6)---权限管理思路讲解
权限管理思路讲解
有关后台管理系统之前写过五篇博客,看这篇之前最好先看下这五篇博客。另外这里只展示关键部分代码，项目代码放在github上： mall-manage-system
1、Vue + Element-ui实现后台管理系统(1) --- 总述
2、Vue + Element-ui实现后台管理系统(2) --- 项目搭建 + ⾸⻚布局实现
3、Vue + Element-ui实现后台管理系统(3) --- 面包屑 + Tag标签切换功能
4、Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
5、Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
这篇主要讲解权限相关的功能：
整体效果
admin用户看到的菜单
xiaoxiao用户看到的菜单
可以发现不同的用户所看到侧边栏的菜单是不一样的。
简单来讲大致需要满足的功能就是：
1、不同的用户会根据权限不同，在后台管理系统渲染不同的菜单栏。
2、用户登陆之后,会获取路由菜单和一个token,之后跳转的页面都需要带着token。
3、用户退出登陆,清除动态路由,清除token。跳转到login页面。
4、如果当前没有token，那么跳转到任何页面都应该重定向到login页面。
一、权限管理代码思路讲解
1、登陆所做的事情
登陆操作应该至少要做三件事情
1、获取当前用户对应的菜单栏的菜单,并存储到vuex和cookies中。
2、获取当前用户的Token，存储到vuex和cookie中
3、获取当前的菜单生成动态路由。
代码
methods: {
login() {
this.$http.post('api/permission/getMenu', this.form).then(res => {
res = res.data
if (res.code === 20000) {
//先清除 房子重复加入
this.$store.commit('clearMenu')
//再加入
this.$store.commit('setMenu', res.data.menu)
//放入token
this.$store.commit('setToken', res.data.token)
//添加动态路由
this.$store.commit('addMenu', this.$router)
//跳转到首页
this.$router.push({ name: 'home' })
} else {
//如果失败 提示失败信息
this.$message.warning(res.data.message)
}
})
}
}
2、退出登陆所做的事情
退出登陆所做的事情就和登陆相反,主要做两件事情1、清除vuex和cookie中的菜单 2、清除vuex和cookie中的token
代码
logOut() {
//清除token
this.$store.commit('clearToken')
//清除菜单
this.$store.commit('clearMenu')
//重定向 一般是登陆页
location.reload()
}
3、路由守卫所做的事
因为是后台管理系统,所以在我们在每切换一个路由都需要判断当前token是否存在,这个时候就需要通过路由守卫来实现。
router.beforeEach((to, from, next) => {
// 防止刷新后vuex里丢失token
store.commit('getToken')
// 防止刷新后vuex里丢失标签列表tagList
store.commit('getMenu')
let token = store.state.user.token
// 过滤登录页，因为去登陆页不需要token(防止死循环)
if (!token && to.name !== 'login') {
next({ name: 'login' })
} else {
next()
}
})
整个过程大家就是这样。现在展示vuex相关的代码。
4、vuex存放token相关方法。
import Cookie from 'js-cookie'
export default {
state: {
token: ''
},
mutations: {
//存放token
setToken(state, val) {
state.token = val
Cookie.set('token', val)
},
//清空token
clearToken(state) {
state.token = ''
Cookie.remove('token')
},
//获取token
getToken(state) {
state.token = Cookie.get('token')
}
},
actions: {}
}
5、vuex存放菜单相关方法
import Cookie from 'js-cookie'
export default {
state: {
menu: []
},
mutations: {
setMenu(state, val) {
//vuex添加
state.menu = val
//cookie也添加
Cookie.set('menu', JSON.stringify(val))
},
clearMenu(state) {
//清除也一样 vuex和cookie都清除
state.menu = []
Cookie.remove('menu')
},
addMenu(state, router) {
if (!Cookie.get('menu')) {
return
}
//取出cookie数据 给vuex
let menu = JSON.parse(Cookie.get('menu'))
state.menu = menu
//添加动态路由 主路由为Main.vue
let currentMenu = [
{
path: '/',
component: () => import(`@/views/Main`),
children: []
}
]
//如果是一级菜单 那么菜单名称肯定有路由 如果是二级菜单那么一级没有 二级有路由
menu.forEach(item => {
if (item.children) {
item.children = item.children.map(item => {
item.component = () => import(`@/views/${item.url}`)
return item
})
currentMenu[0].children.push(...item.children)
} else {
item.component = () => import(`@/views/${item.url}`)
currentMenu[0].children.push(item)
}
})
//添加动态路由
router.addRoutes(currentMenu)
}
},
actions: {}
}
整个电商后台管理系统相关内容到这里就已经写完了。
别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(16)
