这篇文章主要介绍了LayUI+Shiro实现动态菜单并记住菜单收展的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
LayUI + Shiro + Thyemleaf 实现动态菜单并记住菜单收展
一、Maven 依赖
com.alibaba fastjson 1.2.39 org.apache.shiro shiro-spring-boot-starter 1.4.0-RC2 com.github.theborakompanioni thymeleaf-extras-shiro 2.0.0 org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.1.4 org.springframework.boot spring-boot-devtools runtime true mysql mysql-connector-java runtime org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test
二、菜单相关的类
1、主菜单
/** * @author wxhntmy */ @Getter @Setter public class Menu { private String name; private String icon; private String url; private Boolean hidden; private List list; } 2、子菜单
/** * @author wxhntmy */ @Getter @Setter public class MenuList { private String name; private String url; public MenuList(String name, String url) { this.name = name; this.url = url; } } 三、Shiro 配置
1、ShiroConfig
/** * @author wxhntmy */ @Configuration public class ShiroConfig { /** * 配置拦截器 * * 定义拦截URL权限，优先级从上到下 1). anon : 匿名访问，无需登录 2). authc : 登录后才能访问 3). logout: 登出 4). * roles : 角色过滤器 *
* URL 匹配风格 1). ?：匹配一个字符，如 /admin? 将匹配 /admin1，但不匹配 /admin 或 /admin/； 2). * *：匹配零个或多个字符串，如 /admin* 将匹配 /admin 或/admin123，但不匹配 /admin/1； 2). * **：匹配路径中的零个或多个路径，如 /admin/** 将匹配 /admin/a 或 /admin/a/b *
* 配置身份验证成功，失败的跳转路径 */ @Bean public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager) { ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean(); shiroFilterFactoryBean.setSecurityManager(securityManager); Map filterChainDefinitionMap = new LinkedHashMap(); // 静态资源匿名访问 filterChainDefinitionMap.put("/layui/**", "anon"); filterChainDefinitionMap.put("/js/**", "anon"); filterChainDefinitionMap.put("/admin/**", "anon"); filterChainDefinitionMap.put("/**/*.eot", "anon"); filterChainDefinitionMap.put("/**/*.svg", "anon"); filterChainDefinitionMap.put("/**/*.svgz", "anon"); filterChainDefinitionMap.put("/**/*.ttf", "anon"); filterChainDefinitionMap.put("/**/*.woff", "anon"); filterChainDefinitionMap.put("/**/*.woff2", "anon"); filterChainDefinitionMap.put("/**/*.gif", "anon"); filterChainDefinitionMap.put("/favicon.ico", "anon"); filterChainDefinitionMap.put("/login", "anon"); filterChainDefinitionMap.put("/menu", "anon"); filterChainDefinitionMap.put("/user/login", "anon"); // 用户退出 filterChainDefinitionMap.put("/logout", "logout"); // 其他路径均需要身份认证，一般位于最下面，优先级最低 filterChainDefinitionMap.put("/**", "authc"); shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap); //登录路径 shiroFilterFactoryBean.setLoginUrl("/login"); // 主页 //shiroFilterFactoryBean.setSuccessUrl("/index"); //验证失败跳转的路径 shiroFilterFactoryBean.setUnauthorizedUrl("/error"); return shiroFilterFactoryBean; } /** * SecurityManager安全管理器；shiro的核心 * * @return */ @Bean public DefaultWebSecurityManager securityManager() { DefaultWebSecurityManager defaultWebSecurityManager = new DefaultWebSecurityManager(myRealm()); return defaultWebSecurityManager; } /** * 自定义Realm * * @return */ @Bean public MyRealm myRealm() { MyRealm myRealm = new MyRealm(); myRealm.setCredentialsMatcher(myCredentialsMatcher()); return myRealm; } /** * 配置加密方式 * @return */ @Bean public MyCredentialsMatcher myCredentialsMatcher() { return new MyCredentialsMatcher(); } /** * 配置Shiro生命周期处理器 */ @Bean public LifecycleBeanPostProcessor lifecycleBeanPostProcessor() { return new LifecycleBeanPostProcessor(); } /** * 自动创建代理类，若不添加，Shiro的注解可能不会生效。 */ @Bean @DependsOn({ "lifecycleBeanPostProcessor" }) public DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator() { DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator = new DefaultAdvisorAutoProxyCreator(); advisorAutoProxyCreator.setProxyTargetClass(true); return advisorAutoProxyCreator; } /** * 开启Shiro的注解 */ @Bean public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor() { AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor = new AuthorizationAttributeSourceAdvisor(); authorizationAttributeSourceAdvisor.setSecurityManager(securityManager()); return authorizationAttributeSourceAdvisor; } @Bean public ShiroDialect shiroDialect() { return new ShiroDialect(); } }
2、自定义shiro密码校验
/** * 自定义shiro密码校验 * @author wxhntmy */ public class MyCredentialsMatcher implements CredentialsMatcher { @Resource private UserMapper userMapper; @Override public boolean doCredentialsMatch(AuthenticationToken token, AuthenticationInfo info) { UsernamePasswordToken utoken = (UsernamePasswordToken) token; String password = new String(utoken.getPassword()); String username = utoken.getUsername(); User user = userMapper.getUserById(username); return user.getPwd().equals(password); } } 3、MyRealm
/** * @author wxhntmy */ public class MyRealm extends AuthorizingRealm { @Resource private RoleMapper roleMapper; @Resource private UserRoleListMapper userRoleListMapper; //授权 @Override protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) { SimpleAuthorizationInfo authorizationInfo = new SimpleAuthorizationInfo(); User user = (User) principalCollection.getPrimaryPrincipal(); if (user == null) { return null; } List roleLists = userRoleListMapper.getUserRoleByUserId(user.getId()); List roles = roleMapper.getAllRoles(); if (roleLists != null && !roleLists.isEmpty()) { for (UserRoleList roleList : roleLists) { for (Role role : roles) { if (Objects.equals(roleList.getRole_id(), role.getId())) { authorizationInfo.addRole(role.getRole()); } } } } return authorizationInfo; } //认证 @Override protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException { //获取登录用户账号 UsernamePasswordToken utoken = (UsernamePasswordToken) authenticationToken; //获得用户输入的密码 String password = new String(utoken.getPassword()); String username = utoken.getUsername(); User user = new User(); user.setId(username); user.setPwd(password); //当前realm对象的唯一名字，调用父类的getName()方法 String realmName = getName(); // 获取盐值，即用户名 ByteSource salt = ByteSource.Util.bytes(password); SimpleAuthenticationInfo info = new SimpleAuthenticationInfo(user, password, salt, realmName); return info; } } 四、控制类
1、LoginController
@RestController public class LoginController { @Resource private RoleMapper roleMapper; @Resource private UserRoleListMapper userRoleListMapper; @Resource private UserMapper userMapper; @RequestMapping(value = "/user/login", method = RequestMethod.GET) public Msg getUserByName(@RequestParam String user, @RequestParam String pwd, @RequestParam String usertype, @RequestParam String box) { Role role = roleMapper.getRoleByRoleName(usertype); User uUser = userMapper.getUserById(user); if (uUser == null){ return Msg.fail("UserUnexit"); } //登录验证 UsernamePasswordToken token = new UsernamePasswordToken(user, pwd); Subject subject = SecurityUtils.getSubject(); try { subject.login(token); } catch (AuthenticationException e) { return Msg.fail("PasswordError"); } //设置登陆过期时间，单位毫秒，这里设置30分钟 SecurityUtils.getSubject().getSession().setTimeout(1800000); return Msg.ok("Success"); } } 2、PageController
@Controller public class PageController { @Resource private UserMapper userMapper; @RequestMapping(value = "/login", method = RequestMethod.GET) public String Login(){ return "login"; } @RequestMapping(value = "/user/index", method = RequestMethod.GET) public String Index(Model model){ User user = (User) SecurityUtils.getSubject().getPrincipal(); User uuser = userMapper.getUserById(user.getId()); if (StringUtils.isEmpty(user)) { return "redirect:/login"; } model.addAttribute("user", uuser); return "index"; } } 3、MenuController
/** * @author wxhntmy */ @RestController public class MenuController { @Resource private RoleMapper roleMapper; @Resource private UserRoleListMapper userRoleListMapper; //记住用户菜单收展 private Map menu_map = new HashMap<>(); @RequestMapping(value = "/menu", method = RequestMethod.GET) public Msg> getMenu() { User user = (User) SecurityUtils.getSubject().getPrincipal(); List 五、数据库
1、user 表
2、role 表
3、user_role_list 表
六、前端页面
1、Ajax 请求菜单数据
let config = {}; function set_menu() { //ajax提交信息 $.ajax({ type: "get", async: false, url: "/menu",// 请求发送到LoginServlet处 dataType: 'json', success: function (msg) { if (msg.ok === true && msg.data) { config["name"] = msg.message; config["menu"] = msg.data; } if (msg.ok === false) { window.location.href = "/logout"; } if (!msg.data) { window.location.href = "/logout"; } }, error: function (msg) { // 请求失败时执行该函数 layer.alert('请求菜单数据失败！！！', function (index) { //do something layer.close(index); }); } }); } set_menu(); $(document).ready(function () { //删除 $(".del").click(function () { var url = $(this).attr("href"); var id = $(this).attr("data-id"); layer.confirm('你确定要删除么?', { btn: ['确定', '取消'] }, function () { $.get(url, function (data) { if (data.code === 1) { $(id).fadeOut(); layer.msg(data.msg, {icon: 1}); } else { layer.msg(data.msg, {icon: 2}); } }); }, function () { layer.msg("您取消了删除!"); }); return false; }); }) layui.use('form', function () { var form = layui.form, layer = layui.layer; }); var vue = new Vue({ el: '#app', data: { webname: config.name, menu: [], address: [] }, created: function () { this.menu = config.menu; this.thisActive(); this.thisAttr(); }, methods: { //记住收展 onActive: function (pid, id = false) { let data; if (id === false) { data = this.menu[pid]; if (data.url.length > 0) { this.menu.forEach((v, k) => { v.active = false; v.list.forEach((v2, k2) => { v2.active = false; }) }) data.active = true; } data.hidden = !data.hidden; } else { this.menu.forEach((v, k) => { v.active = false; v.list.forEach((v2, k2) => { v2.active = false; }) }) data = this.menu[pid].list[id]; } this.updateStorage(); if (data.url.length > 0) { if (data.target) { if (data.target === '_blank') { window.open(data.url); } else { window.location.href = data.url; } } else { window.location.href = data.url; } } }, //更新菜单缓存 updateStorage() { //sessionStorage.menu = JSON.stringify(this.menu); $.ajax({ type: "get", async: false, url: "/menu_storage",// 请求发送到LoginServlet处 data: { "data": JSON.stringify(this.menu) }, dataType: 'json', success: function (msg) { }, error: function (msg) { // 请求失败时执行该函数 var index = layer.load(); layer.close(index); layer.alert('请求菜单数据失败！！！', function (index) { //do something layer.close(index); }); } }); }, //菜单高亮 thisActive: function () { let pathname = window.location.pathname; let host = window.location.host; let pid = false; let id = false; this.menu.forEach((v, k) => { let url = v.url; if (url.length > 0) { if (url[0] !== '/' && url.substr(0, 4) !== 'http') { url = '/' + url; } } if (pathname === url) { pid = k; } v.list.forEach((v2, k2) => { let url = v2.url; if (url.length > 0) { if (url[0] !== '/' && url.substr(0, 4) !== 'http') { url = '/' + url; } } if (pathname === url) { pid = k; id = k2; } }) }) if (id !== false) { this.menu[pid].list[id].active = true; } else { if (pid !== false) { this.menu[pid].active = true; } } this.updateStorage(); }, //当前位置 thisAttr: function () { //当前位置 let address = [{ name: '首页', url: '/user/index' }]; this.menu.forEach((v, k) => { v.list.forEach((v2, k2) => { if (v2.active) { address.push({ name: v.name, url: 'javascript:;' }) address.push({ name: v2.name, url: v2.url, }) this.address = address; } }) }) } } }) 2、显示菜单栏
七、完整代码
完整代码转 Gitee：wxhntmy / SpringBootLayuiMenu
到此这篇关于LayUI+Shiro实现动态菜单并记住菜单收展的示例的文章就介绍到这了,更多相关LayUI Shiro动态菜单内容请搜索html中文网以前的文章或继续浏览下面的相关文章希望大家以后多多支持html中文网！
以上就是LayUI+Shiro实现动态菜单并记住菜单收展的示例的详细内容，更多请关注0133技术站其它相关文章！
