• 权限系统--前后端分离

    目录

    1.前端使用:

    2.后端使用:

    3.前端页面--登录页面

    3.1.在views下新建一个视图，作为登录的视图

    3.2.在登录试图视图中，写入登录页面需要的代码

    3.2.1.登录页面

    3.2.2.登录页面的数据和方法

    3.2.3.登录页面的样式

    3.2.4.渲染主件

    3.2.5.设置路由

    3.2.6.跳转页面

    3.2.7.运行之后的样子

    3.4.8.登录按钮事件

    4.后端登录接口

    4.1.新建一个springboot工程

    4.2.引入相关的依赖

    4.3.mp的代码生成器

    4.4.运行代码生成器

    4.5.配置application文件

    4.6.配置swagger的工具类

    4.7.创建同一返回的数据信息加swagger的注解

    4.7.创建登录参数的实体类加swagger注解

    4.8.后端登录接口加swagger的注解

    5.登录的bug

    5.1.修改登录接口

    5.1.1.如果在数据库查询到了用户信息,然后将用户信息保存

    5.1.2.将保存的信息给前端

    5.1.3.axios得请求拦截器、

    6.前置路由守卫

    6.1.什么是前置路由守卫

    6.2.前置路由守卫的语法

    6.3.使用前置路由守卫 --在main.js

    7.整合shiro

    7.1.添加shiro依赖

    7.2.shiro得配置类

    7.3.增加一个realm类对象

    7.4.新增一个拦截器

    7.5.修改controller代码

    8.主页得布局

    8.1.前端

    9.退出登录

    9.1.前端

    9.2.后端

    10.查询左侧菜单

    10.2.请求路径

    10.3.controller层

    10.4.service层

    10.5.mapper层

    10.6.seriveimpl业务代码

    10.7.连表

    1.前端使用:

    vue + elementui + axios + css + html

    2.后端使用:

    springboot+mybatis-plus +mybatis+druid+shiro+swagger2+redis

    3.前端页面--登录页面

    3.1.在views下新建一个视图，作为登录的视图

    3.2.在登录试图视图中，写入登录页面需要的代码

    3.2.1.登录页面

    1. <template>
    2.     
    3.     <div id="login_box">
    4.         <div class="img_position">
    5.             <el-avatar :size="140" :src="imgUrl">el-avatar>
    6.         div>
    7.         <el-card class="box-card">
    8.             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    9.                 <el-form-item label="用户名" prop="name">
    10.                     <el-input type="text" v-model="ruleForm.name" autocomplete="off">el-input>
    11.                 el-form-item>
    12.                 <el-form-item label="密码" prop="password">
    13.                     <el-input type="password" v-model="ruleForm.password" autocomplete="off">el-input>
    14.                 el-form-item>
    15.                 <el-form-item>
    16.     
    17.                     <el-button type="primary"
    18.                                size="mini"
    19.                                :plain="true"
    20.                                @click="login"
    21.                                style="margin-left: 100px;width: 100px">登录el-button>
    22.                 el-form-item>
    23.             el-form>
    24.         el-card>
    25.     div>
    26.  
    27. template>

    3.2.2.登录页面的数据和方法

    1. <script>
    2.     export default {
    3.         name: "Login",
    4.         data(){
    5.             return{
    6.                 ruleForm: {
    7.                     name: '',
    8.                     password: ''
    9.                 },
    10.                 rules: {
    11.                     name: [
    12.                         {required: true, message:'用户名不能为空', trigger: 'blur'},
    13.                     ],
    14.                     password: [
    15.                         {required: true, message: '密码不能为空', trigger: 'blur'},
    16.                     ]
    17.                 },
    18.                 imgUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    19.             }
    20.             },
    21.         methods:{
    22.             login(){
    23.                 this.$refs['ruleForm'].validate((valid) => {
    24.                     if(valid) {
    25.  
    26.                          this.$message.success("登录成功")
    27.                     } else {
    28.                          this.$message.error("登录失败")
    29.                      }
    30.                 })
    31.             }
    32.         }
    33.  
    34.  
    35.     }

    3.2.3.登录页面的样式

    1. <style>
    2.     #login_box{
    3.         position: relative;
    4.         width: 500px;
    5.         margin: 250px auto;
    6.     }
    7.     #login_box div.img_position{
    8.         position: absolute;
    9.         left: 200px;
    10.         top: -70px;
    11.     }
    12.     .text {
    13.         font-size: 14px;
    14.     }
    15.  
    16.     .item {
    17.         padding: 18px 0;
    18.     }
    19.  
    20.     .box-card {
    21.         padding: 100px 50px 0 0;
    22.         width: 480px;
    23.     }
    24. style>

    3.2.4.渲染主件

    
   这个是在app.vue 下渲染的，也就是打开网页默认的页面

     3.2.5.设置路由

    //不管这个路径有没有被访问,一定会导入的网页
import Login from "../views/Login";
    {
  path:'/login', --路径
  name:'Login', --views下的视图
 component:Login --组件的名称
}

    打开网页之后输入login或者/login,就会去找路由下的index .js  在里面去找有没有/login的路径，找到之后根据import Login from "../views/Login";这句话，去找views下的视图页面,然后再网页上显示

    3.2.6.跳转页面

    {
  path: "/",
  redirect: "/login"
}

    刚打开网页的时候上面的网址是http://localhost:8080/#/,显示一片空白,想要登录页面还得输入login或者/login,有点麻烦,而且一打开页面应该是登录页面，不是空白的页面,上面的代码是,一打开页面重定向的login

    3.2.7.运行之后的样子

     3.4.8.登录按钮事件

    我想登录成功之后，跳转到主页面,这个就用到了axios

    [1]//导入axios --在main.js中
    import axios from "axios";


    [2]//把axios挂载到vue对象中,以后在vue中如果使用axios直接可以用$http名称
    Vue.prototype.axios=axios

    方法：

    1.  methods:{
    2.             login(){
    3.                 //表单校验
    4.                 this.$refs['ruleForm'].validate((valid) => {
    5.                         if(valid){
    6.                              //url:后端登录接口的路径 this.ruleForm是表单
    7.                              this.$http.post("http://localhost:8808/user/login",this.ruleForm).then(result=>{
    8.                                     //登录成功之后跳转到主页面--路由跳转
    9.                                 this.$router.push("/home")
    10.  
    11.                              });
    12.                         }
    13.                 })
    14.             }
    15.         }

    路由设置

    1.  {
    2.     path: '/home',
    3.     name: '/Home',
    4.     component: ()=>import("../views/Home")
    5.   }

    4.后端登录接口

    4.1.新建一个springboot工程

     注意：选择版本，要不然会报错--8的版本

    4.2.引入相关的依赖

    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.guangroupId>
    12.     <artifactId>demoartifactId>
    13.     <version>0.0.1-SNAPSHOTversion>
    14.     <name>mybatis-plus-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.  
    54.         <dependency>
    55.             <groupId>org.springframework.bootgroupId>
    56.             <artifactId>spring-boot-starter-webartifactId>
    57.         dependency>
    58.         <dependency>
    59.             <groupId>org.mybatis.spring.bootgroupId>
    60.             <artifactId>mybatis-spring-boot-starterartifactId>
    61.             <version>2.2.2version>
    62.         dependency>
    63.  
    64.         <dependency>
    65.             <groupId>mysqlgroupId>
    66.             <artifactId>mysql-connector-javaartifactId>
    67.             <scope>runtimescope>
    68.         dependency>
    69.         <dependency>
    70.             <groupId>org.projectlombokgroupId>
    71.             <artifactId>lombokartifactId>
    72.             <optional>trueoptional>
    73.         dependency>
    74.         <dependency>
    75.             <groupId>org.springframework.bootgroupId>
    76.             <artifactId>spring-boot-starter-testartifactId>
    77.             <scope>testscope>
    78.         dependency>
    79.     dependencies>
    80.  
    81.     <build>
    82.         <plugins>
    83.             <plugin>
    84.                 <groupId>org.springframework.bootgroupId>
    85.                 <artifactId>spring-boot-maven-pluginartifactId>
    86.                 <configuration>
    87.                     <excludes>
    88.                         <exclude>
    89.                             <groupId>org.projectlombokgroupId>
    90.                             <artifactId>lombokartifactId>
    91.                         exclude>
    92.                     excludes>
    93.                 configuration>
    94.             plugin>
    95.         plugins>
    96.     build>
    97.  
    98. project>

    4.3.mp的代码生成器

    1. package com.guan.demo;
    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. /**
    10.  * TODO
    11.  *
    12.  * @author lenovo
    13.  * @version 1.0
    14.  * @since 2022-08-08  10:02:23
    15.  */
    16. public class Generator {
    17.     public static void main(String[] args) {
    18.         FastAutoGenerator.create("jdbc:mysql://localhost:3306/day?serverTimezone=Asia/Shanghai", "root", "grt081141" +
    19.                 "")
    20.                 .globalConfig(builder -> {
    21.                     builder.author("guan") // 设置作者
    22.                             .enableSwagger() // 开启 swagger 模式
    23.                             .fileOverride() // 覆盖已生成文件
    24.                             .outputDir(".\\src\\main\\java\\"); // 指定输出目录
    25.                 })
    26.                 .packageConfig(builder -> {
    27.                     builder.parent("com.guan.demo") // 设置父包名
    28.                             .moduleName("system") // 设置父包模块名
    29.                             .pathInfo(Collections.singletonMap(OutputFile.xml, "src\\main\\resources\\mapper\\")); // 设置mapperXml生成路径
    30.                 })
    31.                 .strategyConfig(builder -> {
    32.                     builder.addInclude("acl_user","acl_role","acl_permission")// 设置需要生成的表名
    33.                             .addTablePrefix("acl_"); // 设置过滤表前缀
    34.                 })
    35.                 .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
    36.                 .execute();
    37.  
    38.     }
    39. }

    4.4.运行代码生成器

    4.5.配置application文件

    1. #设置端口号--一定要设置端口号,不设置的话,端口号会冲突
    2. server.port=8888
    3. spring.datasource.druid.url=jdbc:mysql://localhost:3306/day?serverTimezone=Asia/Shanghai 
    4. spring.datasource.druid.username=root
    5. spring.datasource.druid.password=grt081141
    6. spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver
    7.  
    8. #日志
    9. mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

    4.6.配置swagger的工具类

    1. @Configuration    //该注解为配置类相当于xml
    2. public class SwaggerConfig {
    3.     @Bean
    4.     //swagger中所有的功能都封装到了Docket类中
    5.     public Docket docket(){
    6.         Docket docket=new Docket(DocumentationType.SWAGGER_2)
    7.                 .groupName("接口文档")
    8.                 设置api文档信息
    9.                 .apiInfo(apiInfo())
    10.                 //为那个包下的类生成接口文档
    11.                 .select()
    12.                 .apis(RequestHandlerSelectors.basePackage("com.guan.demo.system.controller"))
    13.                 .build();
    14.  
    15.         return docket;
    16.     }
    17.     //定义自己接口文档信息
    18.  
    19.     public ApiInfo apiInfo(){
    20.         //description 描述   description 团队地址  license  企业的名字
    21.         Contact DEFAULT_CONTACT = new Contact("哈哈哈", "http://www.bidu.com", "1234@qq.com");
    22.         ApiInfo apiInfo=new ApiInfo("亿个小项目", "针对小孩子的", "1.0", "http://www.jd.com", DEFAULT_CONTACT, "牛家企业", "http://www.taobao.com", new ArrayList());
    23.         return apiInfo;
    24.     }
    25. }

     4.7.创建同一返回的数据信息加swagger的注解

    1. @Data
    2. @NoArgsConstructor
    3. @AllArgsConstructor
    4. @ApiModel("返回同一的信息")
    5. public class CommonResult {
    6.     @ApiModelProperty("状态码 2000成功，5000失败")
    7.     private int code;
    8.     @ApiModelProperty("信息")
    9.     private String msg;
    10.     @ApiModelProperty("数据")
    11.     private Object data;
    12. }

    4.7.创建登录参数的实体类加swagger注解

    1. @Data
    2. @AllArgsConstructor
    3. @NoArgsConstructor
    4. @ApiModel("登录的参数的实体类")
    5. public class VoLogin {
    6.     //这里面的参数必须和你前端请求的参数相同
    7.     @ApiModelProperty("账号")
    8.     private String name;
    9.     @ApiModelProperty("密码")
    10.     private String password;
    11. }

    4.8.后端登录接口加swagger的注解

    1. @RestController
    2. @RequestMapping("/system")
    3. @Api(tags = "登录的类")
    4. public class LoginController {
    5.     @Autowired
    6.     private IUserService userService;
    7.     @Autowired
    8.     private RedisTemplate redisTemplate;
    9.     @PostMapping("/user")
    10.     @ApiOperation(value = "登录的接口")
    11.     /*
    12.     *   origins: 允许哪些域可以跨域访问我这个接口
    13.         allowedHeaders:允许哪些请求头信息跨域
    14.         methods: 允许哪些请求方式跨域
    15.     * */
    16.    // @CrossOrigin  //默认不写是*--解决跨域的问题
    17.     public CommonResult login(@RequestBody VoLogin voLogin){
    18.         QueryWrapper wrapper=new QueryWrapper<>();
    19.         wrapper.eq("username",voLogin.getName());
    20.         wrapper.eq("password",voLogin.getPassword());
    21.         wrapper.eq("is_deleted",0);
    22.         User one = userService.getOne(wrapper);
    23.         if (one!= null) {
    24.             
    25.             return new CommonResult(2000,"登录成功",null);
    26.         }else {
    27.             return new CommonResult(5000,"登录失败",null);
    28.         }
    29.  
    30.     }
    31.  
    32. }

    5.登录的bug

    5.1.修改登录接口

    5.1.1.如果在数据库查询到了用户信息,然后将用户信息保存

    1. @RestController
    2. @RequestMapping("/system")
    3. @Api(tags = "登录的类")
    4. public class LoginController {
    5.     @Autowired
    6.     private IUserService userService;
    7.     @Autowired
    8.     private RedisTemplate redisTemplate;
    9.     @PostMapping("/user")
    10.     @ApiOperation(value = "登录的接口")
    11.     /*
    12.     *   origins: 允许哪些域可以跨域访问我这个接口
    13.         allowedHeaders:允许哪些请求头信息跨域
    14.         methods: 允许哪些请求方式跨域
    15.     * */
    16.    // @CrossOrigin  //默认不写是*--解决跨域的问题
    17.     public CommonResult login(@RequestBody VoLogin voLogin){
    18.         QueryWrapper wrapper=new QueryWrapper<>();
    19.         wrapper.eq("username",voLogin.getName());
    20.         wrapper.eq("password",voLogin.getPassword());
    21.         wrapper.eq("is_deleted",0);
    22.         User one = userService.getOne(wrapper);
    23.         if (one!= null) {
    24.             //登录成功之后随机生成唯一的字符串
    25.             String token = UUID.randomUUID().toString();
    26.           //  System.out.println(token+"---------");
    27.             //把token作为key,user的信息是value
    28.             ValueOperations forValue = redisTemplate.opsForValue();
    29.             forValue.set(token,one,24,TimeUnit.HOURS);
    30.             //把token返回给前端，作为主体
    31.             return new CommonResult(2000,"登录成功",token);
    32.         }else {
    33.             return new CommonResult(5000,"登录失败",null);
    34.         }
    35.  
    36.     }

    5.1.2.将保存的信息给前端

    1.  methods:{
    2.             login(){
    3.                 this.$refs['ruleForm'].validate((valid) => {
    4.                     if(valid) {
    5.                         //  url:后端登录接口的路径
    6.                         this.axios.post("http://localhost:8888/system/user", this.ruleForm).then(result => {
    7.                             if(result.data.code===2000){
    8.                                 //登录成功,获取token
    9.                                 var token = result.data.data;
    10.                                // console.log(result.data.data)
    11.                                 //把token保存
    12.                                 sessionStorage.setItem("token",token);
    13.                                 //登录成功之后跳转到主页面--路由跳转
    14.                                 this.$router.push("/home")
    15.                             }
    16.  
    17.                         });
    18.                         
    19.                     }

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

    5.1.3.axios得请求拦截器、

    1.   //使用axios的请求拦截器,--在请求头上添加token
    2.   //interceptors--拦截器  request--请求方法 use--用
    3. axios.interceptors.request.use(config=>{
    4.   //获取token
    5.   var token = sessionStorage.getItem("token");
    6.   //判断toke里面是不是有值
    7.   if (token){
    8.     //请求头中会携带token
    9.     config.headers.token=token;
    10.   }
    11.   return config;
    12.  
    13. })

    6.前置路由守卫

    6.1.什么是前置路由守卫

    路由跳转之前, 会触发的一个函数 叫前置路由守卫

    6.2.前置路由守卫的语法

    router.beforeEach((to, from, next) => {})

    to : 到哪里去

    from : 从哪里来

    next : 放行函数 next():放行 , next(false):不放行

    6.3.使用前置路由守卫 --在main.js

    1.  
    2. router.beforeEach((to, from, next) =>{
    3.   var path = to.path;
    4.   //判断是不是登录页面
    5.   if (path==="/login"){
    6.     //放行
    7.       return next();
    8.   }
    9.   //判断其他页面是否登录，登录放行
    10.   var token = sessionStorage.getItem("token");
    11.   if(token){
    12.     return next();
    13.   }
    14.   //没有登录的话，跳转到登录页面
    15.   return next("/login");
    16.  
    17. } )

    7.整合shiro

    7.1.添加shiro依赖

           
                org.apache.shiro
                shiro-spring-boot-starter
                1.7.0
           

    7.2.shiro得配置类

    这里面注入RedisTemplate的原因，请看跨域那一篇的笔记

    1. package com.guan.demo.system.config;
    2.  
    3. import com.guan.demo.system.filter.LoginFilter;
    4. import com.guan.demo.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.security.interceptor.AuthorizationAttributeSourceAdvisor;
    9. import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
    10. import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
    11. import org.springframework.aop.framework.autoproxy.DefaultAdvisorAutoProxyCreator;
    12. import org.springframework.beans.factory.annotation.Autowired;
    13. import org.springframework.boot.web.servlet.FilterRegistrationBean;
    14. import org.springframework.context.annotation.Bean;
    15. import org.springframework.context.annotation.Configuration;
    16. import org.springframework.data.redis.core.RedisTemplate;
    17. import org.springframework.web.filter.DelegatingFilterProxy;
    18.  
    19. import javax.servlet.Filter;
    20. import java.util.HashMap;
    21. import java.util.Map;
    22.  
    23. /**
    24.  * TODO
    25.  *
    26.  * @author lenovo
    27.  * @version 1.0
    28.  * @since 2022-08-05  20:05:38
    29.  */
    30. @Configuration
    31. public class ShiroConfig {
    32.  
    33.     @Bean
    34.     public DefaultWebSecurityManager securityManager(){
    35.         DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
    36.         securityManager.setRealm(realm());
    37.         return securityManager;
    38.     }
    39.  
    40.     @Bean
    41.     public Realm realm(){
    42.         MyRealm myRealm = new MyRealm();
    43.         设置密码加密器
    44.         myRealm.setCredentialsMatcher(credentialsMatcher());
    45.         return myRealm;
    46.     }
    47.  
    48.     @Bean
    49.     public CredentialsMatcher credentialsMatcher(){
    50.         //设置密码加密器
    51.         HashedCredentialsMatcher hashedCredentialsMatcher = new HashedCredentialsMatcher();
    52.         //加密的次数
    53.         hashedCredentialsMatcher.setHashIterations(1024);
    54.         //应那种加密方式加密
    55.         hashedCredentialsMatcher.setHashAlgorithmName("MD5");
    56.         return hashedCredentialsMatcher;
    57.     }
    58.     @Autowired
    59.    private RedisTemplate redisTemplate;
    60.     @Bean("shiroFilter")
    61.     public ShiroFilterFactoryBean filterFactoryBean(){
    62.         ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();
    63.         shiroFilterFactoryBean.setSecurityManager(securityManager());
    64.  
    65.         //设置shiro过滤规则
    66.         Map map = new HashMap<>();
    67.         //那些允许放行
    68.         map.put("/system/login","anon");
    69.         //拦截所有
    70.         map.put("/**","authc");
    71.         shiroFilterFactoryBean.setFilterChainDefinitionMap(map);
    72.  
    73.  
    74.         //设置未登录过滤器
    75.         Map filters = new HashMap<>();
    76.         filters.put("authc",new LoginFilter(redisTemplate));
    77.         shiroFilterFactoryBean.setFilters(filters);
    78.  
    79.         return shiroFilterFactoryBean;
    80.     }
    81.  
    82.  
    83.     @Bean
    84.     public FilterRegistrationBean filterProxy(){
    85.         FilterRegistrationBean filterRegistrationBean=new FilterRegistrationBean<>();
    86.         //设置过滤器
    87.         filterRegistrationBean.setFilter(new DelegatingFilterProxy());
    88.         //那个路径过滤
    89.         filterRegistrationBean.setName("shiroFilter");
    90.         filterRegistrationBean.addUrlPatterns("/*");
    91.         return filterRegistrationBean;
    92.     }
    93. }

    7.3.增加一个realm类对象

    1. package com.guan.demo.system.realm;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.guan.demo.system.entity.User;
    5. import com.guan.demo.system.service.IUserService;
    6. import com.guan.demo.system.vo.VoLogin;
    7. import org.apache.shiro.authc.AuthenticationException;
    8. import org.apache.shiro.authc.AuthenticationInfo;
    9. import org.apache.shiro.authc.AuthenticationToken;
    10. import org.apache.shiro.authc.SimpleAuthenticationInfo;
    11. import org.apache.shiro.authz.AuthorizationInfo;
    12. import org.apache.shiro.authz.SimpleAuthorizationInfo;
    13. import org.apache.shiro.realm.AuthorizingRealm;
    14. import org.apache.shiro.subject.PrincipalCollection;
    15. import org.apache.shiro.util.ByteSource;
    16. import org.springframework.beans.factory.annotation.Autowired;
    17.  
    18. import java.util.List;
    19.  
    20. /**
    21.  * TODO
    22.  *
    23.  * @author lenovo
    24.  * @version 1.0
    25.  * @since 2022-08-05  20:07:04
    26.  */
    27.  
    28. public class MyRealm extends AuthorizingRealm {
    29.  
    30.     @Autowired
    31.     private IUserService userService;
    32.     @Override
    33.     protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) {
    34.         return null;
    35.     }
    36.  
    37.     @Override
    38.     protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
    39.         //根据token拿到账号
    40.         String username = (String) token.getPrincipal();
    41.         //根据账号查询信息
    42.         QueryWrapper wrapper = new QueryWrapper<>();
    43.         wrapper.eq("username",username);
    44.         wrapper.eq("is_deleted",0);
    45.         User user = userService.getOne(wrapper);
    46.         //如果user里面查询到了,有值不为空,从数据库中获取密码
    47.         if(user!=null){
    48.             //从数据库中获取的密码
    49.             //第一个参数是唯一标识，第二个参我们获取到user的密码，第三个参数就是获取到当前的名字
    50.             ByteSource bytes = ByteSource.Util.bytes(user.getSalt());
    51.             SimpleAuthenticationInfo info = new SimpleAuthenticationInfo(user,user.getPassword(),bytes,this.getName());
    52.             return info;
    53.         }
    54.         return null;
    55.     }
    56. }

    7.4.新增一个拦截器

    1. //如果类没有交于spring容器来管理 那么该类中得属性也不能让spring帮你注入
    2. public class LoginFilter extends FormAuthenticationFilter {
    3.  
    4.  
    5.     private RedisTemplate redisTemplate;  //没有自动注入,原因该类没有交于spring管理LoginFilter必须交于spring容器来管理。
    6.     //构造方法
    7.     public LoginFilter(RedisTemplate redisTemplate) {
    8.         this.redisTemplate = redisTemplate;
    9.     }
    10.     //当登录成功后执行得方法，如果该方法返回false，则执行onAccessDenied方法,true则不会执行onAccessDenied方法
    11.     @Override
    12.     protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
    13.         System.out.println(redisTemplate);
    14.         HttpServletRequest req = (HttpServletRequest) request;
    15.         //1.请求方式是否为OPTIONS
    16.         String method = req.getMethod();
    17.         //如果请求方式不为空，并且请求方式是OPTIONS,则不执行onAccessDenied方法
    18.         if(method!=null && method.equals("OPTIONS")){
    19.             return true;
    20.         }
    21.  
    22.         //2.判断请求头是否有token值
    23.         String token = req.getHeader("token");
    24.         if(token!=null && redisTemplate.hasKey(token)){
    25.             return true;
    26.         }
    27.         return false;
    28.     }
    29.     //当没有登录时会经过该方法。如果想让他返回json数据那么必须重写方法
    30.     @Override
    31.     protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {
    32.  
    33.         response.setContentType("application/json;charset=utf-8");
    34.         PrintWriter writer = response.getWriter();
    35.         CommonResult commonResult = new CommonResult(4001, "未登录", null);
    36.         ObjectMapper objectMapper=new ObjectMapper();
    37.         String json = objectMapper.writeValueAsString(commonResult);
    38.         writer.print(json); //响应给客户json数据
    39.         writer.flush();
    40.         writer.close();
    41.         return false;
    42.     }
    43. }

    7.5.修改controller代码

    1.  //登录
    2.     @PostMapping("/login")
    3.     @ApiOperation(value = "登录的接口")
    4.     /*
    5.     *   origins: 允许哪些域可以跨域访问我这个接口
    6.         allowedHeaders:允许哪些请求头信息跨域
    7.         methods: 允许哪些请求方式跨域
    8.     * */
    9.    // @CrossOrigin  //默认不写是*--解决跨域的问题
    10.     public CommonResult login(@RequestBody VoLogin voLogin){
    11.  
    12.         try {
    13.             //获取subject对象
    14.             Subject subject = SecurityUtils.getSubject();
    15.             UsernamePasswordToken usernamePasswordToken = new UsernamePasswordToken(voLogin.getName(),voLogin.getPassword());
    16.             //登录
    17.             subject.login(usernamePasswordToken);
    18.             //获取主体
    19.             Object one = subject.getPrincipal();
    20.  
    21.             //登录成功之后随机生成唯一的字符串
    22.             String token = UUID.randomUUID().toString();
    23.           //  System.out.println(token+"---------");
    24.             //把token作为key,user的信息是value
    25.             ValueOperations forValue = redisTemplate.opsForValue();
    26.             forValue.set(token,one,24,TimeUnit.HOURS);
    27.             //把token返回给前端，作为主体
    28.             return new CommonResult(2000,"登录成功",token);
    29.         }catch (Exception e){
    30.             return new CommonResult(5000,"登录失败",null);
    31.         }
    32.  
    33.     }

    8.主页得布局

    8.1.前端

    1. <template>
    2.     <el-container>
    3.  
    4.         <el-header>
    5.              <span id="logo" style="display: inline-block;width: 50%;height: 100%;float: left" >
    6.                      <a href="https://www.bilibili.com/video/BV14g41197PY/"><img src="../assets/logo.png" height="100%" width="180px">a>
    7.              span>
    8.             <span id="avatar" style="float: right">
    9.                 <el-dropdown @command="handleCommand">
    10.                     <span class="el-dropdown-link" style="margin-top: 10px; display: inline-block;"  >
    11.                         <el-avatar >el-avatar>
    12.                     span>
    13.                         <el-dropdown-menu slot="dropdown" style="margin-top: -9px">
    14.                             <el-dropdown-item command="personal">个人信息el-dropdown-item>
    15.                             <el-dropdown-item command="loginOut">退出登录el-dropdown-item>
    16.                         el-dropdown-menu>
    17.                  el-dropdown>
    18.             span>
    19.  
    20.         el-header>
    21.  
    22.         
    23.         <el-container height="600px">
    24.            
    25.     el-container>
    26. template>

     样式

    1. <style>
    2.     body{
    3.         margin: 0px;
    4.         padding: 0px;
    5.     }
    6.     .el-menu{
    7.         border:0px;
    8.         background-color:#C0C4CC;
    9.  
    10.     }
    11.     .el-header, .el-footer {
    12.         background-color: #818181;
    13.         color: #333;
    14.         height: 60px;
    15.         line-height: 60px;
    16.     }
    17.  
    18.     .el-aside {
    19.         background-color: #C0C4CC;
    20.         color: #333;
    21.         height: 600px;
    22.         line-height: 600px;
    23.         /*overflow: hidden;*/
    24.     }
    25.     .el-aside::-webkit-scrollbar {
    26.         display: none;
    27.     }
    28.  
    29.     .el-main {
    30.         background-color: #E9EEF3;
    31.         color: #333;
    32.         text-align: center;
    33.         height: 600px;
    34.         line-height: 600px;
    35.         overflow: hidden;
    36.     }
    37.  
    38.     body > .el-container {
    39.         margin-bottom: 40px;
    40.     }
    41.  
    42.     .el-container:nth-child(5) .el-aside,
    43.     .el-container:nth-child(6) .el-aside {
    44.         line-height: 260px;
    45.     }
    46.  
    47.     .el-container:nth-child(7) .el-aside {
    48.         line-height: 320px;
    49.     }
    50.  
    51.     .el-dropdown {
    52.         vertical-align: top;
    53.     }
    54.     .el-dropdown + .el-dropdown {
    55.         margin-left: 15px;
    56.     }
    57.     .el-icon-arrow-down {
    58.         font-size: 12px;
    59.     }
    60.     /*设置标签页第一个不可删除*/
    61.     .el-tabs__nav .el-tabs__item:nth-child(1) span{
    62.         display: none;
    63.     }
    64.  
    65. style>

    9.退出登录

    9.1.前端

    1.             //退出
    2.             handleCommand(command){
    3.                 if (command==='loginOut'){
    4.                     this.axios.post("/system/loginOut").then(result=>{
    5.                         if (result.data.code===2000){
    6.                             //删除缓存的信息
    7.                             sessionStorage.getItem("token");
    8.                             //跳转到登录页面
    9.                             this.$router.push("/login")
    10.                         }
    11.                     })
    12.                 }
    13.             }

    9.2.后端

    1.   @Autowired
    2.     private RedisTemplate redisTemplate;
    3.     //退出
    4.     @PostMapping("/loginOut")
    5.     public CommonResult loginOut(HttpServletRequest request){
    6.         String token = request.getHeader("token");
    7.  
    8.             redisTemplate.delete(token);
    9.             return new CommonResult(2000,"退出成功",null);
    10.     }

    10.查询左侧菜单

    10.1.前端

    1.  
    2.         <el-container height="600px">
    3.             <el-aside width="200px">
    4.  
    5.                     <el-menu
    6.                             default-active="2"
    7.                             class="el-menu-vertical-demo"
    8.                             background-color="#C0C4CC"
    9.                             text-color="#000"
    10.                             active-text-color="#ffd04b">
    11.                         <el-submenu :index="menu.id+''" v-for="menu in leftMenus">
    12.                             <template slot="title">
    13.                                 <i class="el-icon-location">i>
    14.                                 <span>{{menu.name}}span>
    15.                             template>
    16.                             <el-menu-item :index="second.id+''" v-for="second in menu.children">
    17.                                 <i :class="el-icon-menu">i>
    18.                                 <span slot="title">
    19.                                     <a style="color: white; text-decoration: none ">{{second.name}}a>span>
    20.                             el-menu-item>
    21.                         el-submenu>
    22.                     el-menu>
    23.  
    24.             el-aside>
    25.             <el-main>el-main>
    26.         el-container>

     10.2.请求路径

    1. data(){
    2.             return{
    3.                 leftMenus:[],
    4.             }
    5.         },
    6.         created() {
    7.             this.initLeftMenu();
    8.         },
    9.         methods:{
    10.             initLeftMenu(){
    11.                 this.axios.post("/system/permission/leftMenu").then(result=>{
    12.                     if(result.data.code===2000){
    13.                         this.leftMenus=result.data.data;
    14.                     }
    15.                 })
    16.             },

    10.3.controller层

    1. @RestController
    2. @RequestMapping("/system/permission")
    3. public class PermissionController {
    4.     @Autowired
    5.     private IPermissionService permissionService;
    6.  
    7.     @PostMapping("leftMenu")
    8.     public CommonResult leftMenu(HttpServletRequest request){
    9.         //获取登录者的信息
    10.         String token = request.getHeader("token");
    11.         return permissionService.findPermissionByUserId(token);
    12.     }
    13. }

    10.4.service层

    1. public interface IPermissionService extends IService {
    2.  
    3.     CommonResult findPermissionByUserId(String token);
    4. }

     10.5.mapper层

    1. public interface PermissionMapper extends BaseMapper {
    2.  
    3.     List selectByUserId(String id);
    4. }

    10.6.seriveimpl业务代码

    1.    @Autowired
    2.     private PermissionMapper permissionMapper;
    3.     @Autowired
    4.     private RedisTemplate redisTemplate;
    5.  
    6.     @Override
    7.     public CommonResult findPermissionByUserId(String token) {
    8.         //根据token获取用户信息
    9.         ValueOperations forValue = redisTemplate.opsForValue();
    10.         User o = (User) forValue.get(token);
    11.         String id = o.getId();
    12.         //根据用户id查询该用户具有得权限。
    13.         List permissionList = permissionMapper.selectByUserId(id);
    14.         //设置层级关系
    15.         List firstMenus = new ArrayList<>();
    16.         for (Permission first : permissionList) {
    17.             //找一级菜单
    18.             if (first.getPid().equals("1")) {
    19.                 firstMenus.add(first);
    20.             }
    21.         }
    22.  
    23.  
    24.         //为一级菜单设置二级菜单
    25.         for (Permission first : firstMenus) {
    26.             //根据一级菜单id 查询 该菜单得二级菜单。如果出现不确定有几级菜单 那么我们可以使用方法得递归调用
    27.             first.setChildren(findChildren(permissionList, first.getId()));
    28.  
    29.         }
    30.  
    31.         return new CommonResult(2000,"查询成功",firstMenus);
    32.     }
    33.  
    34.     //方法递归
    35.     private List findChildren(List permissionList, String id) {
    36.         List children = new ArrayList<>();
    37.         for (Permission p : permissionList) {
    38.             if (p.getPid().equals(id)) {
    39.                 children.add(p);
    40.             }
    41.         }
    42.  
    43.  
    44.         for (Permission child : children) {
    45.             child.setChildren(findChildren(permissionList, child.getId()));
    46.         }
    47.  
    48.         return children;
    49.  
    50.     }
    51. }

    10.7.连表

    1. <select id="selectByUserId" resultType="com.guan.demo.system.entity.Permission">
    2.     select distinct p.* from acl_user_role ur join acl_role_permission rp on ur.role_id=rp.role_id join acl_permission
    3.     p on rp.permission_id=p.id where ur.user_id=#{userid} and type=1
    4. select>

  • 相关阅读:
    Request的总结
    Linux安装Phantomjs
    阿里云服务器公网带宽收费价格表_1M到100M报价
    【python】基础语法
    中期科技：智慧公厕打造智能化城市设施，提升公共厕所管理与服务体验
    狗都会用的余弦退火（CosineAnnealingLR）学习率调节算法讲解
    【云原生 | Kubernetes 系列】RBAC 鉴权
    用全栈智能，联想如何“零故障”支持亚运会？
    基于Java后端与Typescript前端的代码自动生成 - malcolmcrum
    堆排序 — — 堆结构及问题【十大经典排序算法】
  • 原文地址：https://blog.csdn.net/ne_123456/article/details/126235787