LayUI+Shiro implements a dynamic menu and remembers the example of menu expansion
|
LayUI + Shiro + Thyemleaf implements dynamic menu and remembers menu expansion and contraction
1. Maven Dependency
<dependencies>
<!--Ali FastJson dependency-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.39</version>
</dependency>
<!--Permission Control-->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-spring-boot-starter</artifactId>
<version>1.4.0-RC2</version>
</dependency>
<!-- Compatible with thymeleaf's shiro -->
<dependency>
<groupId>com.github.theborakompanioni</groupId>
<artifactId>thymeleaf-extras-shiro</artifactId>
<version>2.0.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
2. Menu related classes1. Main Menu
/**
* @author wxhntmy
*/
@Getter
@Setter
public class Menu {
private String name;
private String icon;
private String url;
private Boolean hidden;
private List<MenuList> list;
}
2. Submenu
/**
* @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;
}
}
3. Shiro Configuration1. ShiroConfig
/**
* @author wxhntmy
*/
@Configuration
public class ShiroConfig {
/**
* Configure interceptor * <p>
* Define interception URL permissions, priority from top to bottom 1). anon: anonymous access, no login required 2). authc: login required 3). logout: log out 4).
* roles : role filter * <p>
* URL matching style 1). ?: matches a character, such as /admin? will match /admin1, but not /admin or /admin/; 2).
* *: matches zero or more strings, such as /admin* will match /admin or /admin123, but not /admin/1; 2).
* **: matches zero or more paths in the path, such as /admin/** will match /admin/a or /admin/a/b
* <p>
* Configure the jump path for successful and failed authentication*/
@Bean
public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager) {
ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();
shiroFilterFactoryBean.setSecurityManager(securityManager);
Map<String, String> filterChainDefinitionMap = new LinkedHashMap<String, String>();
// Anonymous access to static resources 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");
// User logout filterChainDefinitionMap.put("/logout", "logout");
// Other paths require identity authentication and are usually at the bottom with the lowest priority filterChainDefinitionMap.put("/**", "authc");
shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
//Login path shiroFilterFactoryBean.setLoginUrl("/login");
// Home page //shiroFilterFactoryBean.setSuccessUrl("/index");
//Verification failed jump path shiroFilterFactoryBean.setUnauthorizedUrl("/error");
return shiroFilterFactoryBean;
}
/**
* SecurityManager security manager; the core of shiro*
* @return
*/
@Bean
public DefaultWebSecurityManager securityManager() {
DefaultWebSecurityManager defaultWebSecurityManager = new DefaultWebSecurityManager(myRealm());
return defaultWebSecurityManager;
}
/**
* Custom Realm
*
* @return
*/
@Bean
public MyRealm myRealm() {
MyRealm myRealm = new MyRealm();
myRealm.setCredentialsMatcher(myCredentialsMatcher());
return myRealm;
}
/**
* Configure encryption method * @return
*/
@Bean
public MyCredentialsMatcher myCredentialsMatcher() {
return new MyCredentialsMatcher();
}
/**
* Configure Shiro lifecycle processor */
@Bean
public LifecycleBeanPostProcessor lifecycleBeanPostProcessor() {
return new LifecycleBeanPostProcessor();
}
/**
* Automatically create proxy classes. If not added, Shiro's annotations may not take effect.
*/
@Bean
@DependsOn({ "lifecycleBeanPostProcessor" })
public DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator() {
DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator = new DefaultAdvisorAutoProxyCreator();
advisorAutoProxyCreator.setProxyTargetClass(true);
return advisorAutoProxyCreator;
}
/**
* Enable Shiro annotations*/
@Bean
public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor() {
AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor = new AuthorizationAttributeSourceAdvisor();
authorizationAttributeSourceAdvisor.setSecurityManager(securityManager());
return authorizationAttributeSourceAdvisor;
}
@Bean
public ShiroDialect shiroDialect() {
return new ShiroDialect();
}
}
2. Customize Shiro password verification
/**
* Custom shiro password verification * @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;
//Authorization @Override
protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
SimpleAuthorizationInfo authorizationInfo = new SimpleAuthorizationInfo();
User user = (User) principalCollection.getPrimaryPrincipal();
if (user == null) {
return null;
}
List<UserRoleList> roleLists = userRoleListMapper.getUserRoleByUserId(user.getId());
List<Role> 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;
}
//Authentication@Override
protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
//Get the login user account UsernamePasswordToken utoken = (UsernamePasswordToken) authenticationToken;
//Get the password entered by the user String password = new String(utoken.getPassword());
String username = utoken.getUsername();
User user = new User();
user.setId(username);
user.setPwd(password);
//The unique name of the current realm object, call the parent class's getName() method String realmName = getName();
// Get the salt value, i.e. the username ByteSource salt = ByteSource.Util.bytes(password);
SimpleAuthenticationInfo info = new SimpleAuthenticationInfo(user, password, salt, realmName);
return info;
}
}
4. Control1. 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<String> 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");
}
//Login verification UsernamePasswordToken token = new UsernamePasswordToken(user, pwd);
Subject subject = SecurityUtils.getSubject();
try {
subject.login(token);
} catch (AuthenticationException e) {
return Msg.fail("PasswordError");
}
//Set the login expiration time in milliseconds. Here it is set to 30 minutes 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;
//Remember the user menu collection private Map<String, Map> menu_map = new HashMap<>();
@RequestMapping(value = "/menu", method = RequestMethod.GET)
public Msg<List<Menu>> getMenu() {
User user = (User) SecurityUtils.getSubject().getPrincipal();
List<Menu> list = new ArrayList<>();
if (StringUtils.isEmpty(user)) {
return Msg.fail(list, "Login information has expired! Please log in again!");
}
//Remember to collect Map<String, Boolean> map_store = new HashMap<>();
if (menu_map.containsKey(user.getId())){
map_store = menu_map.get(user.getId());
}
Map<String, String> map = new HashMap();
List<UserRoleList> roleLists = userRoleListMapper.getUserRoleByUserId(user.getId());
for (UserRoleList roleList : roleLists) {
Role role = roleMapper.getRoleByRoleId(roleList.getRole_id());
map.put(role.getRole(), roleList.getUser_id());
}
Menu menu1 = new Menu();
menu1.setName("Home");
menu1.setIcon("");
menu1.setUrl("/user/index");
menu1.setHidden(false);
List<MenuList> menuLists2 = new ArrayList<>();
menu1.setList(menuLists2);
list.add(menu1);
if (map.containsKey("student")){
Menu menu2 = new Menu();
Menu menu3 = new Menu();
menu2.setName("Course Management");
menu2.setIcon("");
menu2.setUrl("");
menu2.setHidden(map_store.getOrDefault("Course Management", false));
List<MenuList> menuLists = new ArrayList<>();
MenuList menuList1 = new MenuList("Selected Courses", "");
MenuList menuList2 = new MenuList("Optional Courses", "");
MenuList menuList22 = new MenuList("Course Forum", "");
menuLists.add(menuList1);
menuLists.add(menuList2);
menuLists.add(menuList22);
menu2.setList(menuLists);
menu3.setName("Performance Management");
menu3.setIcon("");
menu3.setUrl("");
menu3.setHidden(map_store.getOrDefault("Performance Management", false));
List<MenuList> menuLists3 = new ArrayList<>();
MenuList menuList3 = new MenuList("Submit course results", "");
MenuList menuList33 = new MenuList("Submit course log", "");
MenuList menuList4 = new MenuList("Practical Training Course Results", "");
MenuList menuList5 = new MenuList("Course Questionnaire", "");
menuLists3.add(menuList3);
menuLists3.add(menuList33);
menuLists3.add(menuList4);
menuLists3.add(menuList5);
menu3.setList(menuLists3);
list.add(menu2);
list.add(menu3);
}
if (map.containsKey("teacher")){
Menu menu2 = new Menu();
Menu menu3 = new Menu();
menu2.setName("Course Management");
menu2.setIcon("");
menu2.setUrl("");
menu2.setHidden(map_store.getOrDefault("Course Management", false));
List<MenuList> menuLists = new ArrayList<>();
MenuList menuList1 = new MenuList("Professor's training courses", "");
MenuList menuList2 = new MenuList("Course Forum", "");
menuLists.add(menuList1);
menuLists.add(menuList2);
menu2.setList(menuLists);
menu3.setName("Performance Management");
menu3.setIcon("");
menu3.setUrl("");
menu3.setHidden(map_store.getOrDefault("Performance Management", false));
List<MenuList> menuLists3 = new ArrayList<>();
MenuList menuList3 = new MenuList("Course Achievement Check", "");
MenuList menuList33 = new MenuList("Course Log Approval", "");
MenuList menuList4 = new MenuList("Practical Training Course Results", "");
menuLists3.add(menuList3);
menuLists3.add(menuList33);
menuLists3.add(menuList4);
menu3.setList(menuLists3);
list.add(menu2);
list.add(menu3);
}
if (map.containsKey("professionor")){
Menu menu2 = new Menu();
Menu menu3 = new Menu();
menu2.setName("Practical Training Course Management");
menu2.setIcon("");
menu2.setUrl("");
menu2.setHidden(map_store.getOrDefault("Practical Training Course Management", false));
List<MenuList> menuLists = new ArrayList<>();
MenuList menuList1 = new MenuList("Practical training courses to be approved", "");
MenuList menuList2 = new MenuList("Add training courses", "");
MenuList menuList3 = new MenuList("Practical Training Course Management", "");
menuLists.add(menuList1);
menuLists.add(menuList2);
menuLists.add(menuList3);
menu2.setList(menuLists);
menu3.setName("Publish Questionnaire");
menu3.setIcon("");
menu3.setUrl("");
menu3.setHidden(map_store.getOrDefault("Publish Questionnaire", false));
List<MenuList> menuLists1 = new ArrayList<>();
MenuList menuList11 = new MenuList("Publish Questionnaire", "");
MenuList menuList21 = new MenuList("Recovery Questionnaire", "");
menuLists1.add(menuList11);
menuLists1.add(menuList21);
menu3.setList(menuLists1);
list.add(menu2);
list.add(menu3);
}
if (map.containsKey("admin")){
Menu menu2 = new Menu();
Menu menu3 = new Menu();
menu2.setName("User Management");
menu2.setIcon("");
menu2.setUrl("");
menu2.setHidden(map_store.getOrDefault("User Management", false));
List<MenuList> menuLists = new ArrayList<>();
MenuList menuList0 = new MenuList("Add User", "");
MenuList menuList1 = new MenuList("Student Account", "");
MenuList menuList2 = new MenuList("Teacher Account", "");
MenuList menuList3 = new MenuList("Training person in charge account", "");
menuLists.add(menuList0);
menuLists.add(menuList1);
menuLists.add(menuList2);
menuLists.add(menuList3);
menu2.setList(menuLists);
menu3.setName("Database Management");
menu3.setIcon("");
menu3.setUrl("");
menu3.setHidden(map_store.getOrDefault("Database Management", false));
List<MenuList> menuLists3 = new ArrayList<>();
MenuList menuList4 = new MenuList("Backup database", "");
MenuList menuList5 = new MenuList("Restore database", "");
menuLists3.add(menuList4);
menuLists3.add(menuList5);
menu3.setList(menuLists3);
list.add(menu2);
list.add(menu3);
}
Menu menu4 = new Menu();
menu4.setName("System Settings");
menu4.setIcon("");
menu4.setUrl("");
menu4.setHidden(map_store.getOrDefault("System Settings", false));
List<MenuList> menuLists4 = new ArrayList<>();
MenuList menuList5 = new MenuList("Modify personal information", "");
MenuList menuList6 = new MenuList("Change Password", "");
MenuList menuList7 = new MenuList("Clear cache", "");
menuLists4.add(menuList5);
menuLists4.add(menuList6);
menuLists4.add(menuList7);
menu4.setList(menuLists4);
Menu menu5 = new Menu();
menu5.setName("Log out");
menu5.setIcon("");
menu5.setUrl("/logout");
menu5.setHidden(false);
List<MenuList> menuLists5 = new ArrayList<>();
menu5.setList(menuLists5);
list.add(menu4);
list.add(menu5);
if (map.containsKey("student")){
return Msg.ok(list, "STU");
}
String message = null;
if (map.containsKey("teacher")){
message = "TEA";
}
if (map.containsKey("professionor")){
message = "PRI";
}
if (map.containsKey("admin")){
message = "ADM";
}
return Msg.ok(list, message);
}
@RequestMapping(value = "/menu_storage", method = RequestMethod.GET)
public Msg<String> menu_storage(@RequestParam String data) {
JSONArray jsonArray = JSONArray.parseArray(data);
User user = (User) SecurityUtils.getSubject().getPrincipal();
if (StringUtils.isEmpty(user)) {
return Msg.fail("Login information has expired! Please log in again!");
}
//Remember to collect Map<String, Boolean> map_store = new HashMap<>();
for (Object o : jsonArray) {
JSONObject jsonObject = JSONObject.parseObject(o.toString());
map_store.put(jsonObject.getString("name"), Boolean.valueOf(jsonObject.getString("hidden")));
}
menu_map.put(user.getId(), map_store);
return Msg.ok();
}
}
5. Database1. User table
2. Role table
3. user_role_list table
6. Front-end page1. Ajax request menu data
let config = {};
function set_menu() {
//ajax submit information$.ajax({
type: "get",
async: false,
url: "/menu", // The request is sent to 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) {
// Execute this function when the request fails layer.alert('Request for menu data failed!!!', function (index) {
//do something
layer.close(index);
});
}
});
}
set_menu();
$(document).ready(function () {
//delete$(".del").click(function () {
var url = $(this).attr("href");
var id = $(this).attr("data-id");
layer.confirm('Are you sure you want to delete?', {
btn: ['OK', 'Cancel']
}, 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("You canceled the deletion!");
});
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: {
//Remember to close 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;
}
}
},
//Update menu cache updateStorage() {
//sessionStorage.menu = JSON.stringify(this.menu);
$.ajax({
type: "get",
async: false,
url: "/menu_storage", // The request is sent to LoginServlet data: {
"data": JSON.stringify(this.menu)
},
dataType: 'json',
success: function (msg) {
},
error: function (msg) {
// Execute this function when the request fails var index = layer.load();
layer.close(index);
layer.alert('Requesting menu data failed!!!', function (index) {
//do something
layer.close(index);
});
}
});
},
//Menu highlight 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();
},
//Current position thisAttr: function () {
//Current location let address = [{
name: 'Homepage',
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. Display menu bar
<ul class="cl">
<!--Top Category-->
<li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" :class="{active:vo.active}" @click="onActive(index)">
<i class="layui-icon" v-html="vo.icon"></i>
<span v-text="vo.name"></span>
<i class="layui-icon arrow" v-show="vo.url.length==0"></i> <i v-show="vo.active"
class="layui-icon active"></i>
</a>
<!--Sub-category-->
<div v-for="vo2,index2 in vo.list">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" :class="{active:vo2.active}" @click="onActive(index,index2)"
v-text="vo2.name"></a>
<i v-show="vo2.active" class="layui-icon active"></i>
</div>
</li>
</ul>
7. Complete codeComplete code transfer Gitee: wxhntmy/SpringBootLayuiMenu This concludes this article about LayUI+Shiro's example of implementing dynamic menus and remembering menu expansion and contraction. For more related LayUI Shiro dynamic menu content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
>>: How to start and restart nginx in Linux
Recommend
Detailed explanation of Vue's hash jump principle
Table of contents The difference between hash and...
Index in MySQL
Preface Let's get straight to the point. The ...
How to define data examples in Vue
Preface In the development process, defining vari...
Two ways to remove the 30-second ad code from Youku video
I believe everyone has had this feeling: watching ...
The difference between animation and transition
The difference between CSS3 animation and JS anim...
How to build a MySQL PXC cluster
Table of contents 1. Introduction to PXC 1.1 Intr...
Docker installation and configuration command code examples
Docker installation Install dependency packages s...
How much do you know about JavaScript inheritance?
Table of contents Preface The relationship betwee...
Vue multi-page configuration details
Table of contents 1. The difference between multi...
Detailed explanation of linux crm deployment code
Linux basic configuration Compile and install pyt...
Incomplete solution for using input type=text value=str
I encountered a very strange problem today. Look a...
Detailed explanation of the use of cloud native technology kubernetes scheduling unit pod
The smallest scheduling unit in k8s --- pod In th...
How to try to add sticky effect to your CSS
Written in front I don’t know who first discovere...
Problem record of using vue+echarts chart
Preface echarts is my most commonly used charting...
Configure VIM as a C++ development editor in Ubuntu
1. Copy the configuration file to the user enviro...