• 前后端分离权限系统

    1. 完成登录

    1.1 前端布局

    1. <template>
    2.     
    3.  
    4.     <div class="box">
    5.         <div id="loginBox">
    6.             
    7.             <div class="avatar_box">
    8.                 <img src="../assets/c.jpg">
    9.             div>
    10.             <el-form label-width="80px" :model="loginForm" :rules="rules" ref="loginFormRef" class="login_form">
    11.                 <el-form-item label="账号:" prop="username">
    12.                     <el-input v-model="loginForm.username">el-input>
    13.                 el-form-item>
    14.                 <el-form-item label="密码:" prop="password">
    15.                     <el-input v-model="loginForm.password" show-password>el-input>
    16.                 el-form-item>
    17.                 <el-form-item>
    18.                     <el-button type="primary" @click="submitForm">登录el-button>
    19.                 el-form-item>
    20.             el-form>
    21.         div>
    22.     div>
    23. template>
    24.  
    25. <script>
    26.     export default {
    27.         name: "Login",
    28.         data(){
    29.             return{
    30.                 loginForm:{},
    31.                 rules:{
    32.                     username:[
    33.                         {required:true,message:"请输入账号",trigger:"blur"},
    34.                         {min:1,max:12,message:"账号的长度必须在[1~12]之间",trigger:"blur"}
    35.                     ],
    36.                     password:[
    37.                         {required:true,message:"请输入密码",trigger:"blur"},
    38.                         {min:1,max:12,message:"账号的长度必须在[1~12]之间",trigger:"blur"}
    39.                     ]
    40.  
    41.                 }
    42.             }
    43.         },
    44.  
    45.     }
    46. script>
    47.  
    48. <style>
    49.     body,.box{
    50.         overflow: hidden;
    51.         height: 100%;
    52.         background-size:1920px,945px;
    53.     }
    54.     .box{
    55.         background:url("../assets/a.jpg");
    56.     }
    57.     #loginBox {
    58.         width: 450px;
    59.         height: 300px;
    60.         background-color:rgba(247,224,175,0.0);
    61.         border-radius: 3px;
    62.         position: absolute;
    63.         left: 45%;
    64.         top: 60%;
    65.         transform: translate(-50%, -50%);
    66.         /*opacity: 0.8;*/
    67.     }
    68.     #loginBox>.avatar_box{
    69.         height: 130px;
    70.         width: 130px;
    71.         border: 1px solid #eee;
    72.         border-radius: 50%;
    73.         padding: 10px;
    74.         box-shadow: 0 0 10px #ddd;
    75.         position: absolute;
    76.         left: 50%;
    77.         transform: translate(-50%, -50%);
    78.         background-color: #fff;
    79.     }
    80.     #loginBox>.avatar_box>img {
    81.         width: 100%;
    82.         height: 100%;
    83.         border-radius: 50%;
    84.         background-color: #eee;
    85.     }
    86.     .login_form {
    87.         position: absolute;
    88.         bottom: 0;
    89.         width: 100%;
    90.         padding: 0 20px;
    91.         box-sizing: border-box;
    92.     }
    93. style>

    （2）登录按钮事件

    如果想在vue工程中使用axios进行异步请求，则需要在main.js中导入axios
    [1]//导入axios
    import axios from "axios";
    [2]//把axios挂载到vue对象中,以后在vue中如果使用axios直接可以用$http名称
    Vue.prototype.$http=axios

    1.  methods:{
    2.             login(){
    3.                 //表单校验
    4.                 this.$refs['loginFormRef'].validate((valid) => {
    5.                         if(valid){
    6.                              //url:后端登录接口的路径
    7.  this.$http.post("http://localhost:8809/system/login",this.loginForm).then(result=>{
    8.                              });
    9.                         }
    10.                 })
    11.             }
    12.         }

    1.2 完成后端登录接口

    （1） 依赖

    2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    4.     <modelVersion>4.0.0modelVersion>
    5.     <parent>
    6.         <groupId>org.springframework.bootgroupId>
    7.         <artifactId>spring-boot-starter-parentartifactId>
    8.         <version>2.3.12.RELEASEversion>
    9.         <relativePath/> 
    10.     parent>
    11.     <groupId>com.ykqgroupId>
    12.     <artifactId>qy151-springboot-vueartifactId>
    13.     <version>0.0.1-SNAPSHOTversion>
    14.     <name>qy151-springboot-vuename>
    15.     <description>Demo project for Spring Bootdescription>
    16.     <properties>
    17.         <java.version>1.8java.version>
    18.     properties>
    19.     <dependencies>
    20.  
    21.         <dependency>
    22.             <groupId>com.baomidougroupId>
    23.             <artifactId>mybatis-plus-generatorartifactId>
    24.             <version>3.5.2version>
    25.         dependency>
    26.         <dependency>
    27.             <groupId>org.freemarkergroupId>
    28.             <artifactId>freemarkerartifactId>
    29.             <version>2.3.31version>
    30.         dependency>
    31.  
    32.         <dependency>
    33.             <groupId>com.baomidougroupId>
    34.             <artifactId>mybatis-plus-boot-starterartifactId>
    35.             <version>3.5.2version>
    36.         dependency>
    37.         <dependency>
    38.             <groupId>com.alibabagroupId>
    39.             <artifactId>druid-spring-boot-starterartifactId>
    40.             <version>1.2.8version>
    41.         dependency>
    42.  
    43.         <dependency>
    44.             <groupId>com.github.xiaoymingroupId>
    45.             <artifactId>swagger-bootstrap-uiartifactId>
    46.             <version>1.9.6version>
    47.         dependency>
    48.         <dependency>
    49.             <groupId>com.spring4allgroupId>
    50.             <artifactId>swagger-spring-boot-starterartifactId>
    51.             <version>1.9.1.RELEASEversion>
    52.         dependency>
    53.         <dependency>
    54.             <groupId>org.springframework.bootgroupId>
    55.             <artifactId>spring-boot-starter-webartifactId>
    56.         dependency>
    57.         <dependency>
    58.             <groupId>org.mybatis.spring.bootgroupId>
    59.             <artifactId>mybatis-spring-boot-starterartifactId>
    60.             <version>2.2.2version>
    61.         dependency>
    62.  
    63.         <dependency>
    64.             <groupId>mysqlgroupId>
    65.             <artifactId>mysql-connector-javaartifactId>
    66.             <scope>runtimescope>
    67.         dependency>
    68.         <dependency>
    69.             <groupId>org.projectlombokgroupId>
    70.             <artifactId>lombokartifactId>
    71.             <optional>trueoptional>
    72.         dependency>
    73.         <dependency>
    74.             <groupId>org.springframework.bootgroupId>
    75.             <artifactId>spring-boot-starter-testartifactId>
    76.             <scope>testscope>
    77.         dependency>
    78.     dependencies>
    79.  
    80.     <build>
    81.         <plugins>
    82.             <plugin>
    83.                 <groupId>org.springframework.bootgroupId>
    84.                 <artifactId>spring-boot-maven-pluginartifactId>
    85.                 <configuration>
    86.                     <excludes>
    87.                         <exclude>
    88.                             <groupId>org.projectlombokgroupId>
    89.                             <artifactId>lombokartifactId>
    90.                         exclude>
    91.                     excludes>
    92.                 configuration>
    93.             plugin>
    94.         plugins>
    95.     build>
    96.  
    97. project>

    (2)mp的代码生成器

    1. package com.lmy;
    2.  
    3. import com.baomidou.mybatisplus.generator.FastAutoGenerator;
    4. import com.baomidou.mybatisplus.generator.config.OutputFile;
    5. import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
    6.  
    7. import java.util.Collections;
    8.  
    9. public class Generator {
    10.     public static void main(String[] args) {
    11.         FastAutoGenerator.create("jdbc:mysql://localhost:3306/acl_permission?serverTimezone=Asia/Shanghai", "root", "133243")
    12.                 .globalConfig(builder -> {
    13.                     builder.author("娄明阳") // 设置作者
    14.                             .enableSwagger() // 开启 swagger 模式
    15.                             .fileOverride() // 覆盖已生成文件
    16.                             .outputDir(".\\src\\main\\java\\"); // 指定输出目录
    17.                 })
    18.                 .packageConfig(builder -> {
    19.                     builder.parent("com.lmy") // 设置父包名
    20.                             .moduleName("system") // 设置父包模块名
    21.                             .pathInfo(Collections.singletonMap(OutputFile.xml, "src\\main\\resources\\mapper\\")); // 设置mapperXml生成路径
    22.                 })
    23.                 .strategyConfig(builder -> {
    24.                     builder.addInclude("acl_user","acl_role","acl_permission","acl_user_role","acl_role_permission")// 设置需要生成的表名
    25.                             .addTablePrefix("acl_"); // 设置过滤表前缀
    26.                 })
    27.                 .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
    28.                 .execute();
    29.  
    30.     }
    31.  
    32. }

    (2) 配置application文件

    1. server.port=8809
    2. spring.datasource.druid.url=jdbc:mysql://localhost:3306/acl_permission?serverTimezone=Asia/Shanghai
    3. spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver
    4. spring.datasource.druid.username=root
    5. spring.datasource.druid.password=133243
    6.  
    7. #日志
    8. mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

    (4)接口

    1. package com.lmy.system.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.lmy.system.entity.User;
    5. import com.lmy.system.service.IUserService;
    6. import com.lmy.system.vo.CommonResult;
    7. import com.lmy.system.vo.LoginVo;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.web.bind.annotation.PostMapping;
    10. import org.springframework.web.bind.annotation.RequestBody;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.RestController;
    13.  
    14.  
    15. @RestController
    16. @RequestMapping("/system")
    17. public class LoginController {
    18.  
    19.     @Autowired
    20.     private IUserService userService;
    21.  
    22.     @PostMapping("login")
    23.     public CommonResult login(@RequestBody LoginVo loginVo){
    24.         QueryWrapper wrapper = new QueryWrapper<>();
    25.         wrapper.eq("username",loginVo.getName());
    26.         wrapper.eq("password",loginVo.getPassword());
    27.         wrapper.eq("is_deleted",0);
    28.         User one = userService.getOne(wrapper);
    29.         if(one!=null){
    30.             return new CommonResult(2000,"登录成功",null);
    31.         }else{
    32.             return new CommonResult(5000,"登录失败",null);
    33.         }
    34.  
    35.     }
    36. }

    前端调用后端登录接口时出现如下的错误

    为跨域问题:

    当使用异步请求从一个网址访问另一个网址时可能会出现跨域问题。
前提:
   1. 必须为异步请求
   2. 当端口号或协议或ip不同时则会出现跨域

    出现两个请求: 有一个请求的方式为: OPTIONS 和真实的请求方式

    理解: OPTIONS先头部队。---探视后台有没有解决跨域。

    如何解决跨域:

    1.前端解决----但是我不会。
2.后端解决---->这里也有几种方式：
   【1】可以借助nginx.
   【2】在代码中解决

    在控制层接口上添加@CrossOrigin

    (origins = {"192.168.0.111:8080","192.168.0.120:8081"},allowedHeaders="运行哪些请求头跨域",methods={"GET","POST"})

    origins: 允许哪些域可以跨域访问我这个接口
    allowedHeaders:允许哪些请求头信息跨域
    methods: 允许哪些请求方式跨域

    上面再控制层接口处加上注解的方式解决跨，麻烦的地方就需要对每个控制类都加该注解。 设置一个全局跨域配置类。

    1. package com.lmy.system.config;
    2.  
    3. import org.springframework.context.annotation.Bean;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.web.cors.CorsConfiguration;
    6. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    7. import org.springframework.web.filter.CorsFilter;
    8.  
    9. @Configuration
    10. //全局跨域配置类
    11. public class CorsConfig {
    12.     // 当前跨域请求最大有效时长。这里默认1天
    13.     private static final long MAX_AGE = 24 * 60 * 60;
    14.  
    15.     @Bean
    16.     public CorsFilter corsFilter() {
    17.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    18.         CorsConfiguration corsConfiguration = new CorsConfiguration();
    19.         corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
    20.         corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
    21.         corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
    22.         corsConfiguration.setMaxAge(MAX_AGE);
    23.         source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
    24.         return new CorsFilter(source);
    25.     }
    26. }

    登录成功后前端路由跳转

    2. 登录的bug

    上面咱们写的登录，后端没有保存数据 前端也没有拿到数据进行保存

     修改登录的接口

    1. package com.lmy.system.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.lmy.system.entity.User;
    5. import com.lmy.system.service.IUserService;
    6. import com.lmy.system.vo.CommonResult;
    7. import com.lmy.system.vo.LoginVo;
    8. import io.swagger.annotations.Api;
    9. import io.swagger.annotations.ApiOperation;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.data.redis.core.RedisTemplate;
    12. import org.springframework.data.redis.core.ValueOperations;
    13. import org.springframework.web.bind.annotation.*;
    14.  
    15. import java.util.UUID;
    16. import java.util.concurrent.TimeUnit;
    17. @RestController
    18. @RequestMapping("/system")
    19. @Api(tags = "登录的接口类")
    20. public class LoginController {
    21.  
    22.     @Autowired
    23.     private IUserService userService;
    24.  
    25.     @Autowired
    26.     private RedisTemplate redisTemplate;
    27.  
    28.     @PostMapping("login")
    29.     @ApiOperation(value="登录接口")
    30.     public CommonResult login(@RequestBody LoginVo loginVo){
    31.         QueryWrapper wrapper = new QueryWrapper<>();
    32.         wrapper.eq("username",loginVo.getName());
    33.         wrapper.eq("password",loginVo.getPassword());
    34.         wrapper.eq("is_deleted",0);
    35.         User one = userService.getOne(wrapper);
    36.         if(one!=null){
    37.             //随机生成一个唯一字符串。
    38.             String token = UUID.randomUUID().toString();
    39.             //把该token作为redis的key value为当前登录用户信息
    40.             ValueOperations forValue = redisTemplate.opsForValue();
    41.             forValue.set(token,one,24, TimeUnit.HOURS);
    42.             return new CommonResult(2000,"登录成功",token);
    43.         }else{
    44.             return new CommonResult(5000,"登录失败",null);
    45.         }
    46.  
    47.     }
    48. }

    修改前端登录方法:

    后面每次请求都可以携        带该token,  

    每次请求都得要人为添加参数token. 我们可以使用axios得请求拦截器。

    3. 前置路由守卫

    前置路由守卫:就是在路由跳转前加上自己得一些业务代码

    1. //设置前置路由守卫 to:到哪个路由  from:从哪个路由来  next():放行到指定路由
    2. router.beforeEach((to,from,next)=>{
    3.       //获取跳转得路径
    4.       var path = to.path;
    5.       //判断是否为登录路由路径
    6.       if(path==="/login"){
    7.           console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
    8.           //放行
    9.           return next();
    10.       }
    11.       //其他路由路径 判断是否登录过
    12.       var token = sessionStorage.getItem("token");
    13.       if(token){
    14.           return next();
    15.       }
    16.       //跳转登录
    17.      return next("/login");
    18. })

    4. 整合shiro

    （1）依赖

    1.         <dependency>
    2.             <groupId>org.apache.shirogroupId>
    3.             <artifactId>shiro-spring-boot-starterartifactId>
    4.             <version>1.7.0version>
    5.         dependency>

    (2) shiro得配置类

    1. package com.lmy.system.config;
    2.  
    3. import com.lmy.system.filter.LoginFilter;
    4. import com.lmy.system.realm.MyRealm;
    5. import org.apache.shiro.authc.credential.CredentialsMatcher;
    6. import org.apache.shiro.authc.credential.HashedCredentialsMatcher;
    7. import org.apache.shiro.realm.Realm;
    8. import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
    9. import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
    10. import org.springframework.boot.web.servlet.FilterRegistrationBean;
    11. import org.springframework.context.annotation.Bean;
    12. import org.springframework.context.annotation.Configuration;
    13. import org.springframework.web.filter.DelegatingFilterProxy;
    14.  
    15. import javax.servlet.Filter;
    16. import java.util.HashMap;
    17. import java.util.Map;
    18.  
    19. @Configuration
    20. public class ShiroConfig {
    21.  
    22.     @Bean
    23.     public DefaultWebSecurityManager securityManager(){
    24.         DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
    25.         securityManager.setRealm(realm());
    26.         return securityManager;
    27.     }
    28.  
    29.     @Bean
    30.     public Realm realm(){
    31.         MyRealm myRealm = new MyRealm();
    32.         myRealm.setCredentialsMatcher(credentialsMatcher());
    33.         return myRealm;
    34.     }
    35.  
    36.     @Bean
    37.     public CredentialsMatcher credentialsMatcher(){
    38.         HashedCredentialsMatcher hashedCredentialsMatcher = new HashedCredentialsMatcher();
    39.         hashedCredentialsMatcher.setHashIterations(1024);
    40.         hashedCredentialsMatcher.setHashAlgorithmName("MD5");
    41.         return hashedCredentialsMatcher;
    42.     }
    43.  
    44.     @Bean("shiroFilter")
    45.     public ShiroFilterFactoryBean filterFactoryBean(){
    46.         ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();
    47.         shiroFilterFactoryBean.setSecurityManager(securityManager());
    48.  
    49.         //设置shiro过滤规则
    50.         Map map = new HashMap<>();
    51.         map.put("/system/login","anon");
    52.         map.put("/**","authc");
    53.         shiroFilterFactoryBean.setFilterChainDefinitionMap(map);
    54.  
    55.  
    56.         //设置未登录过滤器
    57.         Map filters = new HashMap<>();
    58.         filters.put("authc",new LoginFilter());
    59.         shiroFilterFactoryBean.setFilters(filters);
    60.  
    61.         return shiroFilterFactoryBean;
    62.     }
    63.  
    64.  
    65.     @Bean
    66.     public FilterRegistrationBean filterProxy(){
    67.           FilterRegistrationBean filterRegistrationBean=new FilterRegistrationBean<>();
    68.           filterRegistrationBean.setFilter(new DelegatingFilterProxy());
    69.           filterRegistrationBean.setName("shiroFilter");
    70.           filterRegistrationBean.addUrlPatterns("/*");
    71.           return filterRegistrationBean;
    72.     }
    73. }

    （3）增加一个realm类对象

    1. package com.lmy.system.realm;
    2. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    3. import com.lmy.system.entity.User;
    4. import com.lmy.system.service.IUserService;
    5. import org.apache.shiro.authc.AuthenticationException;
    6. import org.apache.shiro.authc.AuthenticationInfo;
    7. import org.apache.shiro.authc.AuthenticationToken;
    8. import org.apache.shiro.authc.SimpleAuthenticationInfo;
    9. import org.apache.shiro.authz.AuthorizationInfo;
    10. import org.apache.shiro.authz.SimpleAuthorizationInfo;
    11. import org.apache.shiro.realm.AuthorizingRealm;
    12. import org.apache.shiro.subject.PrincipalCollection;
    13. import org.apache.shiro.util.ByteSource;
    14. import org.springframework.beans.factory.annotation.Autowired;
    15.  
    16. public class MyRealm extends AuthorizingRealm {
    17.  
    18.     @Autowired
    19.     private IUserService userService;
    20.     @Override
    21.     protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) {
    22.         return null;
    23.     }
    24.  
    25.     @Override
    26.     protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
    27.         String username = (String) token.getPrincipal();
    28.         QueryWrapper wrapper = new QueryWrapper<>();
    29.         wrapper.eq("username",username);
    30.         wrapper.eq("is_deleted",0);
    31.         User user = userService.getOne(wrapper);
    32.         if(user!=null){
    33.             ByteSource bytes = ByteSource.Util.bytes(user.getSalt());
    34.             SimpleAuthenticationInfo info = new SimpleAuthenticationInfo(user,user.getPassword(),bytes,this.getName());
    35.             return info;
    36.         }
    37.         return null;
    38.     }
    39. }

    （4） 修改controller代码

     测试登录

     登录成功后获取用户信息时出现如下得错误

     被shiro得拦截器给拦截器了。

    1. package com.lmy.system.filter;
    2.  
    3. import org.apache.shiro.web.filter.authc.FormAuthenticationFilter;
    4. import org.springframework.beans.factory.annotation.Autowired;
    5. import org.springframework.data.redis.core.RedisTemplate;
    6. import org.springframework.stereotype.Component;
    7.  
    8. import javax.servlet.ServletRequest;
    9. import javax.servlet.ServletResponse;
    10. import javax.servlet.http.HttpServletRequest;
    11.  
    12. //如果类没有交于spring容器来管理 那么该类中得属性也不能让spring帮你注入
    13. public class LoginFilter extends FormAuthenticationFilter {
    14.  
    15.     private RedisTemplate redisTemplate;  //LoginFilter必须交于spring容器来管理。
    16.  
    17.     public LoginFilter(RedisTemplate redisTemplate) {
    18.         this.redisTemplate = redisTemplate;
    19.     }
    20.  
    21.     //当登录成功后执行得方法，如果该方法返回false，则执行onAccessDenied
    22.     @Override
    23.     protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
    24.         System.out.println(redisTemplate);
    25.         HttpServletRequest req = (HttpServletRequest) request;
    26.         //1.请求方式是否为OPTIONS
    27.         String method = req.getMethod();
    28.         if(method!=null && method.equals("OPTIONS")){
    29.             return true;
    30.         }
    31.  
    32.         //2.判断请求头是否有token值
    33.         String token = req.getHeader("token");
    34.         if(token!=null && redisTemplate.hasKey(token)){
    35.             return true;
    36.         }
    37.         return false;
    38.     }
    39.  
    40.     //未登录时调用该方法? 为什么进入没有登录方法:
    41.     // --->第一个请求是OPTIONS,没有携带token  第二个因为前端和后端不是用得同一个session.默认shiro以sessionId为是否登录得标准
    42.     @Override
    43.     protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {
    44.         System.out.println("*******************************");
    45.         return false;
    46.     }
    47. }

    5. 主页得布局

    1. <template>
    2.         <el-container>
    3.             <el-header>
    4.                 <span id="logo" style="display: inline-block;width: 50%;height: 100%;float: left" >
    5.                      <a href="https://www.bilibili.com/video/BV14g41197PY/"><img src="../assets/logo.png" height="100%" width="180px">a>
    6.                 span>
    7.                 <span id="avatar" style="float: right">
    8.                     <el-dropdown >
    9.                   <span class="el-dropdown-link" style="margin-top: 10px; display: inline-block;">
    10.                     <el-avatar >el-avatar>
    11.                   span>
    12.                     <el-dropdown-menu slot="dropdown">
    13.                         <el-dropdown-item command="info">个人信息el-dropdown-item>
    14.                         <el-dropdown-item command="logout">退出登录el-dropdown-item>
    15.                     el-dropdown-menu>
    16.                 el-dropdown>
    17.                 span>
    18.             el-header>
    19.             <el-container>
    20.                 <el-aside width="200px">
    21.  
    22.                 el-aside>
    23.                 <el-main>
    24.  
    25.                 el-main>
    26.             el-container>
    27.             <el-footer>Footerel-footer>
    28.         el-container>
    29. template>
    30.  
    31. <script>
    32.     export default {
    33.         name: "Home",
    34.         methods:{
    35.               getInfo(){
    36.                    this.$http.get("http://localhost:8808/system/user/getInfo").then(result=>{
    37.                          console.log(result)
    38.                    })
    39.               }
    40.         }
    41.     }
    42. script>
    44. <style>
    45.     html,body,#app{
    46.          height: 100%;
    47.     }
    48.     body,#app{
    49.         padding: 0px;
    50.         margin:0px;
    51.     }
    52.     .el-container{
    53.          height: 100%;
    54.     }
    55.     .el-header, .el-footer {
    56.         background-color: #1F272F;
    57.         color: #333;
    58.         line-height: 60px;
    59.     }
    60.  
    61.     .el-aside {
    62.         background-color: #545c64;
    63.         color: #333;
    64.         line-height: 560px;
    65.     }
    66.     .el-aside>.el-menu{
    67.         border: none;
    68.     }
    69.     .el-main {
    70.         background-color: #E9EEF3;
    71.         color: #333;
    72.         line-height: 560px;
    73.     }
    74.  
    75.     body > .el-container {
    76.         margin-bottom: 40px;
    77.     }
    78.  
    79.     .el-container:nth-child(5) .el-aside,
    80.     .el-container:nth-child(6) .el-aside {
    81.         line-height: 260px;
    82.     }
    83.  
    84.     .el-container:nth-child(7) .el-aside {
    85.         line-height: 320px;
    86.     }
    87. style>

    6. 退出

    前端:  

    后端:

    1.  @GetMapping("/logout")
    2.     public CommonResult logout(HttpServletRequest request){
    3.         String token = request.getHeader("token");
    4.         if(redisTemplate.hasKey(token)){
    5.             redisTemplate.delete(token);
    6.             return new CommonResult(2000,"退出成功",null);
    7.         }
    8.         return new CommonResult(5000,"无效得token",null);
    9.     }

     7. 查询左侧菜单

    (1)前端

    1. initLeftMenu(){
    2.                 this.$http.get("/system/permission/leftMenu").then(result=>{
    3.                       if(result.data.code===2000){
    4.                            this.leftMenus=result.data.data;
    5.                       }
    6.                 })
    7.             },

    (2)后端

    1. @Controller
    2. @RequestMapping("/system/permission")
    3. public class PermissionController {
    4.  
    5.     @Autowired
    6.     private IPermissionService permissionService;
    7.  
    8.     @GetMapping("leftMenu")
    9.     public CommonResult leftMenu(HttpServletRequest request){
    10.         String token = request.getHeader("token");
    11.         return permissionService.findPermissionByUserId(token);
    12.     }
    13.  
    14. }

    service

    1. package com.lmy.system.service.impl;
    2.  
    3. import com.lmy.system.entity.Permission;
    4. import com.lmy.system.entity.User;
    5. import com.lmy.system.mapper.PermissionMapper;
    6. import com.lmy.system.service.IPermissionService;
    7. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    8. import com.ykq.system.vo.CommonResult;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.data.redis.core.RedisTemplate;
    11. import org.springframework.data.redis.core.ValueOperations;
    12. import org.springframework.stereotype.Service;
    13.  
    14. import java.util.ArrayList;
    15. import java.util.List;
    16.  
    17. @Service
    18. public class PermissionServiceImpl extends ServiceImpl implements IPermissionService {
    19.  
    20.     @Autowired
    21.     private PermissionMapper permissionMapper;
    22.     @Autowired
    23.     private RedisTemplate redisTemplate;
    24.  
    25.     @Override
    26.     public CommonResult findPermissionByUserId(String token) {
    27.         //根据token获取用户信息
    28.         ValueOperations forValue = redisTemplate.opsForValue();
    29.         User o = (User) forValue.get(token);
    30.         String id = o.getId();
    31.         //根据用户id查询该用户具有得权限。
    32.         List permissionList = permissionMapper.selectByUserId(id);
    33.         //设置层级关系
    34.         List firstMenus = new ArrayList<>();
    35.         for (Permission first : permissionList) {
    36.             //int
    37.             if (first.getPid().equals("1")) {
    38.                 firstMenus.add(first);
    39.             }
    40.         }
    41.  
    42.  
    43.         //为一级菜单设置二级菜单
    44.         for (Permission first : firstMenus) {
    45.             //根据一级菜单id 查询 该菜单得二级菜单。如果出现不确定有几级菜单 那么我们可以使用方法得递归调用
    46.             first.setChildren(findChildren(permissionList, first.getId()));
    47.  
    48.         }
    49.  
    50.         return new CommonResult(2000,"查询成功",firstMenus);
    51.     }
    52.  
    53.     //方法递归
    54.     private List findChildren(List permissionList, String id) {
    55.         List children = new ArrayList<>();
    56.         for (Permission p : permissionList) {
    57.             if (p.getPid().equals(id)) {
    58.                 children.add(p);
    59.             }
    60.         }
    61.  
    62.  
    63.         for (Permission child : children) {
    64.             child.setChildren(findChildren(permissionList, child.getId()));
    65.         }
    66.  
    67.         return children;
    68.  
    69.     }
    70. }

  • 相关阅读:
    Windows 11 上使用安卓应用及安装谷歌 Google Play和亚马逊 应用商店
    分布式锁的三种实现方式
    计算机毕业设计ssm+vue基本微信小程序的蛋糕预订平台系统
    8.SpringMVC处理ajax请求
    什么是集成测试？集成测试方法有哪些？
    电子设备内幕：RAM和ROM小百科
    golang promethus consul 服务发现
    每日分享html之两个input搜索框、两个button按钮、一个logo效果
    微服务框架 SpringCloud微服务架构 12 DockerCompose 12.2 部署微服务集群
    「X」to「Earn」：赛道现状与破局思路
  • 原文地址：https://blog.csdn.net/qq_59114219/article/details/126231294