网站建设教学方法探究,相关搜索优化软件,.net做网站的吗,网站设计平台 动易前后端分离的整合 使用springsecurity前端项目redis完成认证授权的代码 1. 搭建一个前端工程 使用 vue ui搭建#xff0c;使用webstrom操作 2. 创建一个登录页面
templatediv classlogin_container!-- 登录盒子 --div classl…前后端分离的整合 使用springsecurity前端项目redis完成认证授权的代码 1. 搭建一个前端工程 使用 vue ui搭建使用webstrom操作 2. 创建一个登录页面
templatediv classlogin_container!-- 登录盒子 --div classlogin_box!-- 头像 --div classavatar_boximg src../assets/3.jpg alt/div!-- 登录表单 --el-form :modelloginForm refLoginFormRef label-width0px classlogin_form!-- 用户名 --el-form-item propusernameel-input v-modelloginForm.username prefix-iconel-icon-user-solid /el-input/el-form-item!-- 密码 --el-form-item proppasswordel-input typepassword v-modelloginForm.password prefix-iconel-icon-s-grid/el-input/el-form-item!-- 按钮 --el-form-item classbtnsel-button typeprimary 登录/el-buttonel-button typeinfo重置/el-button/el-form-item/el-form/div/div
/template
script
export default {name: Login,data() {return {//数据绑定loginForm: {username: 张三,password: 123456},}},methods:{}
}
/scriptstyle scoped
.login_container {background-color: #2b5b6b;height: 100%;
}
.login_box {width: 450px;height: 300px;background: #fff;border: 1px solid #42b983;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.login_box.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;}
.login_box.avatar_boximg {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;
}
.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;
}
.btns {display: flex;justify-content: flex-end;
}
/style在views中创建视图——登录页面 在router的index.js中配置路由 {path: /,name: home,//重定向使之打开页面就跳转到登录页面redirect: /login,},//配置登录页面的路由{path: /login,name:login,component: () import(../views/Login.vue),},在App.vue默认组件中进行路由渲染 templatediv idapprouter-view//div
/template3. 登录按钮的点击事件
1. 首先需要在main.js全局配置中全局配置axios 导入axios设置axios的基础路径端口号为后端项目的端口号将axios挂载到vue对象中 import axios form axios//导入
axios.dafaults.baseURL基础路径http://ip:端口号 //配置axios的基础路径便于在进行axios请求时将其省略
Vue.prototype.$名称axios//将axios挂载到vue对象中。axios要与导入时的import后的名称一致。2. 然后在login页面的登录页面添加点击事件 在loginForm表单中添加表单验证——:rules关键字和ref在data中添加表单验证的规则实现点击事件 表单验证 验证规则 登录点击事件 myLogin(){this.$refs.LoginFormRef.validate(valid {if(valid){this.$axios.post(/login?usernamethis.loginForm.usernamepasswordthis.loginForm.password).then(res{if(res.data.code 200){this.$message.success(登录成功)//将token保存到sessionStorage类似于cookiesessionStorage.setItem(token,res.data.data)//跳转到后台this.$router.push(/home)}else{this.$message.error(登录失败)}})}})}在该请求中将获取到的token存放到sessionStorage中通过setItem方法 解决跨域问题
此时允许点击“登录”按钮会报错出现跨域问题 跨域问题通过ajax从一个服务访问另一个服务时出现跨域问题 服务只要ip或端口或协议不同都称为不同的域 如何解决 由两种方式前端解决和后端解决这里仅讲解后端的解决方式 后端解决 在config中创建一个用于解决跨域问题的配置类 Configuration
public class AllowOriginConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**) // 所有接口.allowCredentials(true) // 是否发送 Cookie.allowedOrigins(*)//支持域// .allowedOriginPatterns(*) // 支持域.allowedMethods(new String[]{GET, POST, PUT, DELETE}) // 支持方法.allowedHeaders(*).exposedHeaders(*);}
}在security配置类中添加登录允许跨域的设置 因为其他需求可以而login不行因为login是security写的不止自己写的 http.cors();Overrideprotected void configure(HttpSecurity http) throws Exception {//把自定义的过滤器放在之前http.addFilterBefore(loginFilter, UsernamePasswordAuthenticationFilter.class);http.formLogin()//登录页面;//登录的处理路径 默认 /login.loginProcessingUrl(/login).successHandler(successHandler())//登录成功.failureHandler(failureHandler()) //登录失败转发的路径 必须为post请求.permitAll(); //上面的请求路径无需认证//指定权限不足跳转的页面http.exceptionHandling().accessDeniedHandler(accessDeniedHandler());http.csrf().disable();//禁用跨域伪造请求的过滤器//security登录允许跨域http.cors();//除了上的请求,其他请求都需要认证http.authorizeRequests().anyRequest().authenticated();}4. 前置路由守卫 前置路由守卫用于判断有没有登录 放在main.js或/router/index.js中 在设置前置路由守卫之前在没有登录的情况下可以直接访问登录后的页面——不符合现实所以使用前置路由守卫来判断有没有登录 先查看路径若用户访问的是登录页面/login直接放行若不是就获取sessionStorage中保存的token值若token不存在或者token为undefined就强制跳转到/login登录页面如果token存在直接放行 //前置路由守卫
//to:即将要访问的路径
//from从哪里来
//next放行函数
router.beforeEach((to,from,next){//如果用户访问的是登录页面直接放行if(to.path /login){//放行return next();}//获取sessionStorage中保存的token值const token window.sessionStorage.getItem(token);//如果token不存在强制跳转到登录页面if(!token){return next(/login);}//如果token存在直接放行next();
})
5. 设置携带token令牌请求拦截器 在未设置请求拦截器之前成功登录后点击按钮均显示“未登录”是因为请求没有携带token令牌后端判断为未登录 放在main.js中 //设置请求拦截器——携带token令牌
axios.interceptors.request.use(config{var token sessionStorage.getItem(token);if(token){config.headers.token token;}return config;
})
6. 设置响应拦截器 确保后端返回类型为R类型 在main.js中设置响应拦截器 后端示例
PreAuthorize(hasAuthority(user:query))GetMapping(/select)public R select(){System.out.println(查询用户);return new R(200,查询用户,查询用户);}
前端响应拦截器
//设置响应拦截器
axios.interceptors.response.use(response{//如果返回的code为200为成功显示返回的信息if(response.data.code200){Vue.prototype.$message.success(response.data.msg);return response;}else {//否则为失败显示返回的信息Vue.prototype.$message.error(response.data.msg);return response;}
}) 设置响应拦截器之后就可以通过响应拦截器将后端的信息显示到前端页面无需在axios请求中再次处理相关msg 示例 methods:{query(){this.$axios.get(/user/select).then(res{})},insert(){this.$axios.get(/user/add).then(res{})},del(){this.$axios.get(/user/delete).then(res{})},update(){this.$axios.get(/user/update).then(res{})},myExport(){this.$axios.get(/user/export).then(res{})}},
7. 退出 后端借助redis完成。 在登录时登录成功后将token存入到redis中在配置时自定义实现退出接口使其在退出登录后删除redis中的缓存信息并返回json数据而不是页面在登录过滤器中验证token时加判断判断redis中是否存在登录的token 因为要借助redis所以需要导入redis并在配置文件中进行配置并且开启装有redis的虚拟机开启redis服务 引入依赖 !--引入redis依赖--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-redis/artifactId/dependency 在配置文件中添加redis相关配置 #Redis服务器连接端口
spring.redis.port6379
#Redis服务器地址
spring.redis.host172.16.7.112 在登录成功后将token添加到redis中 //将token存入redis缓存中 redisTemplate.opsForValue().set(login:token,); Autowiredprivate StringRedisTemplate redisTemplate;//登录成功需要返回的json数据private AuthenticationSuccessHandler successHandler(){return new AuthenticationSuccessHandler() {Overridepublic void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {//设置响应编码httpServletResponse.setContentType(application/json;charsetutf-8);//获取输出对象PrintWriter writer httpServletResponse.getWriter();//返回json数据MapString,Object mapnew HashMap();map.put(username,authentication.getName());//获取权限信息列表Collection? extends GrantedAuthority authorities authentication.getAuthorities();//获取权限标识码ListString collect authorities.stream().map(item - item.getAuthority()).collect(Collectors.toList());map.put(permission,collect);String token JWTUtil.createToken(map);//将token存入redis缓存中redisTemplate.opsForValue().set(login:token,);//返回一个统一的json对象R rnew R(200,登录成功,token);//转换未json字符串String s JSON.toJSONString(r);//servlet//发送响应到客户端writer.println(s);//将JSON字符串写入到HTTP响应中writer.flush();//确保所有缓冲的输出都被发送到客户端writer.close();//关闭PrintWriter}};} 在security配置文件中重写退出方法 //退出登录后删除redis中的缓存信息 redisTemplate.delete(login:token); Overrideprotected void configure(HttpSecurity http) throws Exception {//把自定义的过滤器放在之前http.addFilterBefore(loginFilter, UsernamePasswordAuthenticationFilter.class);http.formLogin()//登录页面;//登录的处理路径 默认 /login.loginProcessingUrl(/login).successHandler(successHandler())//登录成功.failureHandler(failureHandler()) //登录失败转发的路径 必须为post请求.permitAll(); //上面的请求路径无需认证//指定权限不足跳转的页面http.exceptionHandling().accessDeniedHandler(accessDeniedHandler());http.csrf().disable();//禁用跨域伪造请求的过滤器//退出重写使其返回json数据而不是网页http.logout(item-{item.logoutSuccessHandler((httpServletRequest, httpServletResponse, e) - {httpServletResponse.setContentType(application/json;charsetutf-8);PrintWriter writer httpServletResponse.getWriter();String token httpServletRequest.getHeader(token);//退出登录后删除redis中的缓存信息redisTemplate.delete(login:token);R rnew R(200,退出成功,null);String jsonString JSON.toJSONString(r);writer.println(jsonString);writer.flush();writer.close();});});//security登录允许跨域http.cors();//除了上的请求,其他请求都需要认证http.authorizeRequests().anyRequest().authenticated();} 在登录过滤器中添加判断条件 !redisTemplate.hasKey(login:token //3. 验证tokenif(!JWTUtil.verify(token)||!redisTemplate.hasKey(login:token)){PrintWriter writer httpServletResponse.getWriter();//返回一个token失效的json数据R rnew R(500,token失效,null);String s JSON.toJSONString(r);writer.write(s);writer.flush();writer.close();return;} 前端添加退出点击事件退出后删除sessionStorage中的token信息并跳转返回登录页面 logout(){this.$axios.post(/logout).then(res{//移除sessionStorage中的tokensessionStorage.removeItem(token)//跳转到登录页面this.$router.push(/login)})}
