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月份写到了现在,中间写写停停,让大家等了那么久,我的技术有限,我把我所学的东西尽可能的回馈给大家,出于学习的心态,可能写的不好,希望大家多理解。移动端的我想了下,先不写,等下一个项目再加上,或者想要学习的可以私聊我加好友,方便沟通。