1. vue基础知识
1. vue通过脚手架搭建前端项目。 vue ui 2. 组件: [1]创建一个组件网页 [2]注册组件(局部: import 组件名 from "组件路径" components:{名称:组件名}) (全局注册main: import 组件名 from "组件路径" Vue.component("名称",组件名) ) [3]使用组件 <名称></名称> 3. 组件之间的通信: 父子。 props $emit(事件,数据) 4. 路由: 组件和路径绑定关系 router/index.js 5. 路由跳转的方式: 声明<router-link to="">和编码式。this.$router.push() 6. 路由传参: 查询参数{this.$route.query.名称}和动态路由参数{this.$route.params.名称}。
2. 正文
1. springsecurity+前端项目+redis完成认证授权的代码
3. 搭建一个前端工程
4. 创建一个登录页面
<template> <div class="login_container"> <!-- 登录盒子 --> <div class="login_box"> <!-- 头像 --> <div class="avatar_box"> <img src="../assets/logo.png" alt=""> </div> <!-- 登录表单 --> <el-form :model="loginForm" ref="LoginFormRef" label-width="0px" class="login_form"> <!-- 用户名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" ></el-input> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-s-grid"></el-input> </el-form-item> <!-- 按钮 --> <el-form-item class="btns"> <el-button type="primary" >登录</el-button> <el-button type="info">重置</el-button> </el-form-item> </el-form> </div> </div> </template> <script> export default { name: "Login", data() { return { //数据绑定 loginForm: { username: '张三', password: '123456' }, } }, methods:{ } } </script> <style 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_box>img { 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>
5. 登录按钮的事件
methods:{ login(){ this.$refs.LoginFormRef.validate(valid => { if(valid){ //ajax请求 this.$http.post("/login?username="+this.loginForm.username+"&password="+this.loginForm.password,).then(res=>{ if(res.data.code==200){ this.$message.success("登录成功") //将token保存到sessionStorage. 类似于cookie sessionStorage.setItem("token",res.data.token) //跳转到后台主页 this.$router.push("/home") }else{ this.$message.error("登录失败") } }) } }) }
$http: 在main.js里面配置了。
跨域问题: 通过ajax从一个服务访问另一个服务时,出现跨域问题。
服务: 只要ip 或 端口 或协议不同。都称为不同的域。
如何解决: 前端解决或后端解决。
我们可以后端解决:
@Configuration // 一定不要忽略此注解---自己定义的接口资源 public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 所有接口 .allowCredentials(true) // 是否发送 Cookie .allowedOriginPatterns("*") // 支持域 .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法 .allowedHeaders("*") .exposedHeaders("*"); } }
6. 前置路由守卫
放在main.js或/router/index.js
//前置路由守卫 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(); })
7. 设置携带token令牌--请求拦截器
//请求拦截器--- axios.interceptors.request.use(config=>{ var token = sessionStorage.getItem("token"); if(token){ config.headers.token = token; } return config; })
8. 设置响应拦截器
//设置响应拦截器 axios.interceptors.response.use(response=>{ if(response.data.code===200){ Vue.prototype.$message.success(response.data.msg); return response; }else { Vue.prototype.$message.error(response.data.msg); return response; } })
9. 退出
//退出 logout(){ this.$http.post("/logout").then(res=>{ sessionStorage.removeItem("token") //跳转到登录页面 this.$router.push("/login") }) },
//退出 http.logout(item->{ item.logoutSuccessHandler((httpServletRequest, httpServletResponse, e) -> { httpServletResponse.setContentType("application/json;charset=utf-8"); PrintWriter writer = httpServletResponse.getWriter(); String token = httpServletRequest.getHeader("token"); redisTemplate.delete("login:"+token); R r=new R(200,"退出成功",null); String jsonString =JSON.toJSONString(r); writer.println(jsonString); writer.flush(); writer.close(); }); });
后端:
登录成功放入redis
判断token是否在redis----过滤器