4、跨域

我们先说一下什么是跨域：

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

我们后端进行解决一下，其实只需要一个注解即可@CrossOrigin，我们可以在Controller类或其方法上加@CrossOrigin注解，来使之支持跨域。例如：

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/User")
public class UserController {
}

但是我们先不这样做，我们写一个全局的，适用整个项目的接口。

和项目的启动类同级别的新建一个ResourcesConfig.java，重要的我都加了注释，可以自己看一下。

package com.blog.personalblog;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
 * @author: SuperMan
 * @create: 2022-03-14
 **/
@Configuration
public class ResourcesConfig implements WebMvcConfigurer {
    /**
     * 配置全局跨域
     */
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //同源配置，*表示任何请求都视为同源，若需指定ip和端口可以改为如“localhost：8080”，多个以“，”分隔；
        corsConfiguration.addAllowedOriginPattern("*");
        //header，允许哪些header，本案中使用的是token，此处可将*替换为token；
        corsConfiguration.addAllowedHeader("*");
        //允许的请求方法，POST、GET等
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

此时，我们的功能做的差不多了，我们先将后台的代码启动，然后再去将前端项目启动，然后打开登录的页面，我们先输入一个错误的密码或者用户名试一下。密码不对，会弹出一个错误的框，现在没有错误提示，我们给它加上错误的提示。

handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: this.redirect || '/' })
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
this.$notify.error({
title: '登录失败',
message: '请输入正确的用户名或密码！'
})
    }

然后我对页面做了一些调整，我把代码贴出了来，你们直接粘贴过去就可以了，在/views/login/index.vue的文件里，直接复制粘贴即可。

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <h3 class="title">个 人 博 客 管 理 系 统</h3>
      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="账号" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :type="pwdType"
          v-model="loginForm.password"
          name="password"
          auto-complete="on"
          placeholder="密码"
          @keyup.enter.native="handleLogin" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { isvalidUsername } from '@/utils/validate'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: undefined,
        password: undefined
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false,
      pwdType: 'undefined',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.$notify.error({
        title: '登录失败',
        message: '请输入正确的用户名或密码！'
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;
/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    max-width: 100%;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>

现在基本上完成了我们的登录，接下来我们会前后端联调接口，通过页面来添加文章、删除等功能。后边我再对页面进行优化吧，现在先这样。今天看到一句话，我感觉讲的很实际，在这里分享一下：不以实战为目的的任何学习都是耍流氓，最终还是要走向实战。

二、前后端分离会话问题解决

我再测试的时候发现一个后台的问题，就是我们登录的时候拿到的Cookie没有进行后端的会话存储，导致我们页面请求出现302的问题，前后端的分离问题要考虑会话存储的问题，所以我们现在先解决前后端分离项目中使用shiro的会话问题。要不然页面请求的接口会出现问题。我当时也没考虑页面的问题，只用了postman测了一下。

我这里选择的是redis来存储会话信息。

1、导入shiro整合redis的jar包

在我们项目的pom.xml中添加如下：

<dependency>
     <groupId>org.crazycake</groupId>
     <artifactId>shiro-redis</artifactId>
     <version>2.4.2.1-RELEASE</version>
</dependency>

2、自定义SessionManager类

我们在项目的shiro包中新建一个MySessionManager.java类，然后这个类继承DefaultWebSessionManager类。

package com.blog.personalblog.shiro;
import org.apache.shiro.web.servlet.ShiroHttpServletRequest;
import org.apache.shiro.web.session.mgt.DefaultWebSessionManager;
import org.apache.shiro.web.util.WebUtils;
import org.springframework.util.StringUtils;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import java.io.Serializable;
/**
 * @author: SuperMan
 * @create: 2022-04-14
 **/
public class MySessionManager extends DefaultWebSessionManager {
    private static final String AUTHORIZATION = "Authorization";
    private static final String REFERENCED_SESSION_ID_SOURCE = "Stateless request";
    public MySessionManager() {
        super();
    }
    @Override
    protected Serializable getSessionId(ServletRequest request, ServletResponse response) {
        String id = WebUtils.toHttp(request).getHeader(AUTHORIZATION);
        //如果请求头中有 Authorization 则其值为sessionId
        if (!StringUtils.isEmpty(id)) {
            request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID_SOURCE, REFERENCED_SESSION_ID_SOURCE);
            request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID, id);
            request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID_IS_VALID, Boolean.TRUE);
            return id;
        } else {
            //否则按默认规则从cookie取sessionId
            return super.getSessionId(request, response);
        }
    }
}

这里大家可能会问，这个类是干嘛的，什么是SessionManager？

**SessionManager：**会话管理，即用户登录后就是一次会话，在没有退出之前，它的所有信息都在会话中；会话可以是普通 JavaSE 环境的，也可以是如 Web 环境的，负责管理shiro自己封装的session的生命周期。

为什么shiro要自己封装session？

1.可以为任意应用提供session支持，不依赖于底层容器

2.简单扩容session管理容器，可以实现任何数据源（redis，ehcache）来管理session，而不必担心jvm内存溢出。

还有想学习更多的可以看下我找的这一篇文章：shiro详解

3、ShiroConfig配置文件注入SessionManager

写到这的时候，我们就需要下载一下redis的软件了，有很多不知道redis是干嘛的，接下来先说一下redis，这也是以后企业经常用到的，大家尽可能的多去了解和使用。

3.1、什么是redis？

Redis（Remote Dictionary Server )，即远程字典服务，是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。Redis支持主从同步、是一个高性能的key-value数据库。

redis官网地址：https://redis.io/

学习教程：https://www.runoob.com/redis/redis-tutorial.html

3.2、下载（文件版）

打开官网即可看到这个download，直接下载即可。如果想和我的一样，关注下我的公众号：码上言，然后回复：教程，然后关于这个项目的所有软件和资料都会有。我们下载完之后，把压缩包解压后不需要安装，直接点击文件夹里面的redis-server.exe启动即可。启动效果如下，出现这种情况就启动成功了。
这个缺点是每次启动项目前都要去启动一下redis服务，有点麻烦，我们可以找到redis的安装包，设置成开机自启即可。

3.3、下载（安装版）

下载地址：https://github.com/tporadowski/redis/releases 下载下来之后，直接安装即可。如果下载不下来就去我公众号里下载，上边有说下载方式。

这里有几个常用的redis配置，大家学习一下。

其他的东西大家可以去菜鸟教程上边去学习，网上资料还是很多的，这个不是我们学习的重点。

3.4、注入SessionManager

（1）首先去配置文件配置redis

打开·application.yml·，然后添加如下代码，注意是spring配置下的，redis的密码我的为空，你可以看你安装时是不是设置了密码，如果是解压的基本上都是空。

  redis:
    host: 127.0.0.1
    port: 6379
    timeout: 300
    password:
  data:
    redis:
      repositories:
        enabled: false

然后我们在就在ShiroConfig类中引入这些配置。这里用到了一个注解@Value

    @Value("${spring.redis.host}")
    private String host;
    @Value("${spring.redis..port}")
    private int port;
    @Value("${spring.redis.timeout}")
    private int timeout;
    @Value("${spring.redis.password}")
    private String password;

（2）自定义sessionManger

    /**
     * 自定义sessionManager，用户的唯一标识，即Token或Authorization的认证
     * @return
     */
    @Bean
    public SessionManager sessionManager() {
        //创建一个上面自定的SessionManager
        MySessionManager mySessionManager = new MySessionManager();
        mySessionManager.setSessionDAO(redisSessionDAO());
        return mySessionManager;
    }

（3）配置shiro redisManager

在这个方法里面，就使用了我们配置的redis的信息，以后需要改动的时候直接改配置文件即可，也是规范化开发。

    /**
     * 配置shiro redisManager,使用的是shiro-redis开源插件
     *
     * @return
     */
    public RedisManager redisManager() {
        RedisManager redisManager = new RedisManager();
        redisManager.setHost(host);
        redisManager.setPort(port);
        // 配置缓存过期时间
        redisManager.setExpire(1800);
        redisManager.setTimeout(timeout);
        redisManager.setPassword(password);
        return redisManager;
    }

（4）cacheManager 缓存

    /**
     * cacheManager 缓存 redis实现
     * @return
     */
    @Bean
    public RedisCacheManager cacheManager() {
        RedisCacheManager redisCacheManager = new RedisCacheManager();
        redisCacheManager.setRedisManager(redisManager());
        return redisCacheManager;
    }

（5）自定义session管理

    /**
     * RedisSessionDAO shiro sessionDao层的实现 通过redis
     * @return
     */
    @Bean
    public RedisSessionDAO redisSessionDAO() {
        RedisSessionDAO redisSessionDAO = new RedisSessionDAO();
        // 自定义session管理 使用redis
        redisSessionDAO.setRedisManager(redisManager());
        return redisSessionDAO;
    }

3.5、SessionManager注入安全管理器

这个方法我们之前已经写过了，只是没有配置redis这个，现在再加入这个。

    @Bean
    public SecurityManager securityManager() {
        DefaultWebSecurityManager securityManager =  new DefaultWebSecurityManager();
        //一定要通过上面的定义来加载自定义realm,否则在自定义realm中无法注入service层
        securityManager.setRealm(myShiroRealm());
        // 自定义session管理 使用redis
        securityManager.setSessionManager(sessionManager());
        // 自定义缓存实现 使用redis
        securityManager.setCacheManager(cacheManager());
        return securityManager;
    }

一切都配置完成之后，我们再修改一下我们之前的配置过滤规则shirFilter这个方法。这里只需要去掉info接口即可。将这个注释掉即可

filterChainDefinitionMap.put("/user/info", "anon");

然后我们再去登录的接口，打开UserController.java，找到info接口，我们这里可以获取到登录的用户了，我们再修改一下。

    /**
     * 登录info信息
     * @return
     */
    @GetMapping("/info")
    public JsonResult<Object> info(){
        String username = (String) SecurityUtils.getSubject().getPrincipal();
        User user = userService.getUserByUserName(username);
        Map<String, Object> ret = new HashMap<>(3);
        ret.put("roles", "[admin]");
        ret.put("name", user.getUserName());
        ret.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        return JsonResult.success(ret);
    }

好啦，到现在我们的改造完了，下面去打开前端项目，运行，进行登录一下。看到登录进来name为admin这个是真实的用户，你可以再换一个用户，看看是否会变。到这里，后端的问题已经解决，下面我们去写页面。

如果你点击登录控制台出现302错误，请检查一下前端的代码中headers是否正确。

三、计划

在这最后说一下接下来的计划，下面主要是对页面和后台的对接，还有个操作日志没有写，下一篇我先把这个写了，然后再连接页面，估计没有几篇就可以写完了，从去年的10月份写到了现在，中间写写停停，让大家等了那么久，我的技术有限，我把我所学的东西尽可能的回馈给大家，出于学习的心态，可能写的不好，希望大家多理解。移动端的我想了下，先不写，等下一个项目再加上，或者想要学习的可以私聊我加好友，方便沟通。

Spring Boot + vue-element 开发个人博客项目实战教程（十七、登录功能实现（下））2

4、跨域

二、前后端分离会话问题解决

1、导入shiro整合redis的jar包

2、自定义SessionManager类

3、ShiroConfig配置文件注入SessionManager

3.1、什么是redis？

3.2、下载（文件版）

3.3、下载（安装版）

3.4、注入SessionManager

3.5、SessionManager注入安全管理器

三、计划

热门文章

最新文章

相关课程

相关电子书

相关实验场景