VUE动态权限控制（一）--------数据库和后端

绝地灬酷狼 2022-04-10 06:17 264阅读 0赞

现使用springboot+dubbo+vue前后端分离部署实现以下逻辑：用户与角色一对多，角色与权限一对多，不同的用户登录进去可以看到不同的菜单。

一、数据库设计：

![20181228094506998.png][]

1、t\_user：

![20181228095932551.png][]

2、t\_role：

![20181228100023518.png][]

3、t\_module:

![20181228100052594.png][]

4、t\_user\_role:

![20181228100141403.png][]

5、t\_role\_module：

![20181228100314452.png][]

根据数据库配置，张三登录可以看到wtyy\_cs和wtyy\_table两个菜单

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]；

李四登录可以看到wtyy\_table菜单。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1][]

二、后端：

1、api:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 2][]

2、service：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 3][]

3、web：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 4][]

（1）跨域配置：

package com.wtyy.config;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
     
    @Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter {
     
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedHeaders("*")
          .allowedMethods("*")
          .allowedOrigins("*")
          .allowCredentials(true);
      }
    }

（2）返回类型：

package com.wtyy.dto;
    import java.io.Serializable;
    public class HttpResult implements Serializable{
    
    	private static final long serialVersionUID = 1547811901129089180L;
    	private int code;
    	private String message;
    
    	public HttpResult(){
    
    	}
    	
    	public HttpResult(int code, String message, Object data){
    		this.code = code;
    		this.message = message;
    		this.data = data;
    	}
    	
    	public static HttpResult getSuccessInstance(){
    		return new HttpResult(ResultCode.SUCCESS, "操作成功", "");
    	}
    	
    	public static HttpResult getSuccessInstance(Object data){
    		return new HttpResult(ResultCode.SUCCESS, "操作成功", data);
    	}
    	
    	public static HttpResult getFailedInstance(){
    		return new HttpResult(ResultCode.FAILED, "操作失败", "");
    	}
    	
    	public static HttpResult getFailedInstance(String message){
    		return new HttpResult(ResultCode.FAILED, message, "");
    	}	
    	
    	public int getCode() {
    		return code;
    	}
    	public void setCode(int code) {
    		this.code = code;
    	}
    	
    	public String getMessage() {
    		return message;
    	}
    
    	public void setMessage(String message) {
    		this.message = message;
    	}
    
    	public Object getData() {
    		return data;
    	}
    	public void setData(Object data) {
    		this.data = data;
    	}
    	private Object data;
    	
    }

（3）http接口：

HomeController：

package com.wtyy.rest;
    import java.util.HashMap;
    import java.util.Map;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpSession;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import com.wtyy.dto.HttpResult;
    import com.wtyy.dto.User;
    import com.wtyy.service.UserService;
    import com.wtyy.util.JSONUtils;
    
    @RestController
    @RequestMapping("/home")
    public class HomeController {
    	
    	@Autowired
    	private UserService userService;
    
    	@RequestMapping("/login")
    	public HttpResult login(String userName,String pwd,HttpServletRequest req){
    		
    		try{
    			Map<String, String> result = new HashMap<String, String>();
    			User user = userService.login(userName,pwd);
    			if(user != null){
    				HttpSession session = req.getSession();
    				System.out.println("登录时sessionId: "+session.getId());
    				session.setAttribute("user", user);
    				result.put("token", (String) session.getId());
    				return HttpResult.getSuccessInstance(result);
    			}else{
    				return HttpResult.getFailedInstance("用户名或者密码错误");
    			}
    		}catch (Exception e) {
    			return HttpResult.getFailedInstance("接口异常");
    			
    		}
    	}
    }

RoleController：

package com.wtyy.rest;
    import java.util.List;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import com.wtyy.dto.HttpResult;
    import com.wtyy.dto.Role;
    import com.wtyy.dto.User;
    import com.wtyy.service.RoleService;
    import com.wtyy.util.JSONUtils;
    
    @RestController
    @RequestMapping("/role")
    public class RoleController {
    
    	@Autowired
    	private RoleService roleService;
    	
    	@RequestMapping("/selectAll")
    	public HttpResult selectAll(){
    		List<Role> roles = roleService.selectAll();
    		return HttpResult.getSuccessInstance(roles);
    	}
    }

UserController：

package com.wtyy.rest;
    import java.util.List;
    import javax.servlet.http.HttpSession;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import com.wtyy.dto.HttpResult;
    import com.wtyy.dto.User;
    import com.wtyy.service.ModuleService;
    import com.wtyy.service.RoleModuleService;
    import com.wtyy.service.UserRoleService;
    import com.wtyy.service.UserService;
    
    
    @RestController
    @RequestMapping("/user")
    public class UserController {
    
    	@Autowired
    	private UserService userService;
    	
    	@Autowired
    	private UserRoleService userRoleService;
    	
    	@Autowired
    	private RoleModuleService roleModuleService;
    	
    	@Autowired
    	private ModuleService moduleService;
    	
    	@RequestMapping("/selectAll")
    	public HttpResult selectAll(){
    		List<User> users = userService.selectAll();
    		return HttpResult.getSuccessInstance(users);
    	}
    	
    	//获取用户权限
    	@RequestMapping("/getUserRoles")
    	public HttpResult getUserRoles(HttpSession session){
    		System.out.println("获取权限时sessionId: "+session.getId());
    		User user = (User) session.getAttribute("user");
    		Integer userId = user.getId();
    		List<String> roleIds = userRoleService.selectByUserId(userId);
    		List<String> moduleIds = roleModuleService.selectByRoleIds(roleIds);
    		List<String> modules = moduleService.selectByIds(moduleIds);
    		return HttpResult.getSuccessInstance(modules);
    		
    	}
    	
    	//获取用户姓名
    	@RequestMapping("/getUserName")
    	public HttpResult getUserName(HttpSession session){
    		System.out.println("获取权限时sessionId: "+session.getId());
    		User user = (User) session.getAttribute("user");
    		System.out.println("姓名"+user.getUserName());
    		return HttpResult.getSuccessInstance(user.getUserName());
    		
    	}
    	
    	//退出登录
    	@RequestMapping("/logout")
    	public HttpResult logout(HttpSession httpSession){
    		httpSession.removeAttribute("user");
    		return HttpResult.getSuccessInstance();
    	}
    }

严格一点的话，应该是在后端加个拦截器，前端的ajax请求（除了登录）都带上token，在拦截器根据token和session的id比较，相同则放行。

三、前端：

见下一篇博客[https://blog.csdn.net/w\_t\_y\_y/article/details/85318936][https_blog.csdn.net_w_t_y_y_article_details_85318936]

[20181228094506998.png]: /images/20220402/e786fe6e32a44bb8afdcc8e08ac3f297.png
[20181228095932551.png]: /images/20220402/3c86f410ce78402b8d3bef361f1acbb7.png
[20181228100023518.png]: /images/20220402/ad11967f66444a61970114f6312a192b.png
[20181228100052594.png]: /images/20220402/cf3a04900c4b478c8c1bcda7805e526a.png
[20181228100141403.png]: /images/20220402/b72f8bf5f9854d3f983b28beac239eb4.png
[20181228100314452.png]: /images/20220402/6e10c1ec6cfa46409577502689a1fd70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20220402/97e64f5134f64e359a342ad1827c060f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 1]: /images/20220402/f4e7192e6d164c458cf34b416117ce8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 2]: /images/20220402/f5856e3c20b145299454f2c265a9daf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 3]: /images/20220402/86219ee59c544d449ce8ea0943d406c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70 4]: /images/20220402/799f3948b0ac4e5daffe40a958d2ce31.png
[https_blog.csdn.net_w_t_y_y_article_details_85318936]: https://blog.csdn.net/w_t_y_y/article/details/85318936