背景
后台管理系统可以有不同的角色进行登录,我们希望对不同角色进行页面访问控制。
比如:
- 用户a为普通用户,只能访问home路由、访问其他路由的话则显示not-found
- 用户b为管理员,可以访问所有的路由
实现
环境
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
具体代码:
- 静态路由注册,然后挂载到vue实例上
// router/index.js
import Home from "@/components/Home.vue";
import NotFound from "@/components/NotFound.vue";
const routes = [
{ path: "/home", component: Home },
{ path: "*", component: NotFound },
];
- 路由前置守卫监听访问的页面是否是需要权限的页面、是否有登录,有登录过直接放行,没有登录过则获取用户信息并动态注册路由
// main.js
router.beforeEach((to, from, next) => {
if (to.path != "/login") {
if (!store.state.isLogin) {
store.dispatch("getUserInfoAction").then((res) => {
if (res) {
next(to.path);
}
});
} else {
next();
}
} else {
next();
}
});
// store/index.js
export default new Vuex.Store({
state: {
// 1. 记录用户是否登录
isLogin: false,
// 2. 记录用户信息
userInfo: {},
},
getters: {},
mutations: {
changeUserInfo(state, playload) {
state.isLogin = true;
state.userInfo = playload;
},
},
actions: {
// 3. 获取用户信息
async getUserInfoAction({ commit }) {
const userInfo = await axios.get("/get_user_info");
if (!userInfo) {
return false;
}
commit("changeUserInfo", userInfo);
const routes = [];
// 针对不同角色的路由进行动态注册
if (userInfo.role == "管理员") {
routes.push(...dynamicRoutes);
}
routes.forEach((route) => {
router.addRoute(route);
});
console.log(router.getRoutes());
return true;
},
},
modules: {},
});
// dynamicRoutes.js
import About from "@/components/About.vue";
import AboutHaHa from "@/components/AboutHaHa.vue";
const dynamicRoutes = [
{ path: "/order", component: Order },
{
path: "/about",
component: About,
children: [
{
path: "haha",
component: AboutHaHa,
},
],
},
];
export default dynamicRoutes;
效果
普通用户
管理员
原文地址:http://www.cnblogs.com/it774274680/p/16823407.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性