在线夸白之权限页面

科技前沿 • 2025-03-27 21:19 • 阅读 36

大家好，我是讯享网，很高兴认识大家。

啥是权限页面?

大概就是不同的用户进入系统，能看到不同的页面，菜单的标题不同！！！

一般用在后台管理系统

1.首先咱得登录成功然后咱需要在路由前置守卫中获取到用户的信息 ( 里头有用户可以访问到的页面 ) 因为用户信息是存在vuex中的所以需要用store.dispatch调用

if (!store.getters.userId) { const res = await store.dispatch('user/getProfile') // console.log('当前用户可以访问的', res)// roles.menus }

讯享网

2.用本地的页面和发请求得到的页面做数组筛选筛选出来的就是用户可访问的页面

asyncRoutes 是代表本地8个页面 filterRoutes是筛选出来的可访问的页面

讯享网 const filterRoutes = asyncRoutes.filter(item => { return res.roles.menus.includes(item.children[0].name) })

3.配置动态路由在vuex中新建一个模块menu.js 咱先导入静态页面再将后面筛选出来的可访问的页面存入menu 利于后期渲染左侧导航栏

// 导入静态路由 import { constantRoutes } from '@/router' const state = { menuList: [...constantRoutes] } const mutations = { setMenuList(state, payload) { // 将基本数组和筛选出来的数组合并 state.menuList = [...constantRoutes, ...payload] } } export default { namespaced: true, state, mutations }

在前置路由守卫中把筛选出来的数组存入vuex中

讯享网// 将筛选出来的页面保存到vuex中 store.commit('menu/setMenuList', filterRoutes)

4.动态路由添加

router.addRoutes(filterRoutes)

然后还有3个bug ~ ~ ~

1.通过addRoutes( )动态设置了路由之后刷新白屏

解决方法: next(to)

2.退出之后再次进入,会出现路由重复

解决方法:调用resetRouter()

讯享网export function resetRouter() {   const newRouter = createRouter()   router.matcher = newRouter.matcher // reset router }

3.跳转404页面

解决方法: 在router/index.js 里面的404路由配置删掉

放在筛选页面列表的最后面

 filterRoutes.push({ path: '*', redirect: '/404', hidden: true })

最后权限这一块完整的前置路由守卫代码如下:

讯享网// 获取个人信息 // 发获取用户请求 调用vuex里 // if (!store.state.user.userInfo.userId) if (!store.getters.userId) { const res = await store.dispatch('user/getProfile') // console.log('当前用户可以访问的', res)// roles.menus // 动态生成当前的用户能访问的页面 // asyncRoutes一共有8个页面,根据用户权限 从中来筛选用户能访问的页面 // console.log(asyncRoutes) const filterRoutes = asyncRoutes.filter(item => { return res.roles.menus.includes(item.children[0].name) }) // 将404加到最后一项 解决刷新跳转到404的bug filterRoutes.push({ path: '*', redirect: '/404', hidden: true }) // console.log('筛选出来的', filterRoutes) router.addRoutes(filterRoutes) // 将筛选出来的页面保存到vuex中 store.commit('menu/setMenuList', filterRoutes) // 解决出现的白屏 next(to) } else { next() }

在线夸白 之权限页面

相关推荐

在线夸白之权限页面