vue+redis完成认证授权

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----过滤器