vue前后端分离，做普通的登录拦截（未登录：返回一个自定义Exception；放开白名单：通过给方法加上自定义注解，在拦截器中查看过来的方法是否有该注解，有则放开拦截）

ゝ一世哀愁。 2021-09-13 16:54 435阅读 0赞

## vue前后端分离，做普通的登录拦截（未登录：返回一个自定义Exception；放开白名单：通过给方法加上自定义注解，在拦截器中查看过来的方法是否有该注解，有则放开拦截） ##

**1.写一个登录页面**

<template>
    <div>
      <el-form  :model="user"  :rules="rules" ref="ruleForm" label-width="80px"  class="demo-ruleForm" style="margin-left: 35%;margin-top: 5%">
        <el-form-item label="账户" prop="name">
          <el-input v-model="user.name" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" style="width: 300px"></el-input>
        </el-form-item>
    
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-left: 50px;">登录</el-button>
          
          
          <el-link href="/regiterUser" type="primary"  style="margin-left: 30px;">注册</el-link>
    
        </el-form-item>
      </el-form>
    
    </div>
    </template>
    
    <script>
      export default {
        name: 'Loogin',
        data(){
          //验证用户名不能为空
          //checkName与rule中定义的必须保持一致1
          var checkName = (rule, value, callback) => {
            //alert(this.user.name)
            if (value === '') {
              callback(new Error('请输入账号'));
            }
          };
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            }
          };
          return {
            user: {
              password: '',
              name: ''
            },
            /*rules与form中的:rules="rules"保持一致*/
            rules: {
              password: [
                { validator: validatePass, trigger: 'blur' }
              ],
              name: [
                { validator: checkName, trigger: 'blur' }
              ]
            }
          };
        },
        methods:{
          onSubmit(){
            var self = this;
            this.$axios.post('http://localhost:8089/user/loginUser.do',this.$qs.stringify(this.user)).then(function (response) {
              console.log(response)
              if (response.data.code===1000){
                //跳转到登录页面
                self.$router.push("/indexPage")
              }else{
                alert(response.data.data);
                //  self.$router.push("/")
              }
            })
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

**2.写一个注册页面,表单验证【因为涉及到MD5加盐加密，先注册几条数据】**

<template>
      <div>
        <el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-left: 35%;margin-top: 5%">
          <el-form-item label="账号" prop="name">
            <el-input v-model.number="user.name"  style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password" autocomplete="off"  style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="user.checkPass" autocomplete="off"  style="width: 300px"></el-input>
          </el-form-item>
    
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" style="margin-left: 50px;">提交</el-button>
            <el-button @click="resetForm('ruleForm')" style="margin-left: 30px;">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
      export default {
        name: 'regiterUser',
        data() {
          var checkName = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入账号'));
            }else{
              //查询账号是否存在
              this.$axios.post('http://localhost:8089/user/checkUserByName.do',this.$qs.stringify({"name":this.user.name})).then(function (response) {
                if (response.data.code===1000){
                  callback();
                }
                else{
                  callback(new Error('账号已存在'));
                }
              })
            }
          };
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              if (this.user.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.user.password) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return {
            user: {
              password: '',
              checkPass: '',
              name: ''
            },
            rules: {
              password: [
                { validator: validatePass, trigger: 'blur' }
              ],
              checkPass: [
                { validator: validatePass2, trigger: 'blur' }
              ],
              name: [
                { validator: checkName, trigger: 'blur' }
              ]
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
                var self = this;
                this.$axios.post('http://localhost:8089/user/registerUser.do',this.$qs.stringify(this.user)).then(function (response) {
                  if (response.data.code===1000){
                    //跳转到登录页面
                    self.$router.push("/")
                  }
                })
    
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

**3.正式开始登录拦截代码**

**1）在spring-mvc-controller.xml配置拦截器**

<mvc:interceptors>
            <mvc:interceptor>
                <mvc:mapping path="/**"/>
                     
                
               
                <bean class="com.fh.intercetpor.LoginInterceptor"/>
            </mvc:interceptor>
    
        </mvc:interceptors>

**2）自定义一个注解类【如果不拦截的方法，例如：登录，用户注册，验证码等…就被该自定义的注解修饰，在interceptor中判断，如果访问的方法有该注解，则放开拦截】**

@Documented //它的作用是能够将注解中的元素包含到 Javadoc 中去
    @Target(ElementType.METHOD) //表示我们的注解作用的范围就比较具体了，可以是类，方法，方法参数变量
    @Retention(RetentionPolicy.RUNTIME)//它表示注解存在阶段是保留在源码（编译期）,注解会在class字节码文件中存在，在运行时可以通过反射获取到
    public @interface Ignore {
    
    
    }

**例如：**

/**
         * 通过name查询用户是否存在
         * @param name
         * @return
         */
        @Ignore
        @RequestMapping("checkUserByName")
        public ResponseServer checkUserByName(String name){
    
            return userService.checkUserByName(name);
        }
    
    
        /**
         * 注册用户
         * @param user
         * @return
         */ 
        @Ignore
        @RequestMapping("registerUser")
        public ResponseServer registerUser(User user){
    
            return userService.registerUser(user);
    
        }

**3）写一个异常类，当用户，没有登录时，就throw自定义的异常**

/**
     * 写一个异常类，运行时异常，也可以是其他的异常，根据情况需要
     */
    public class MyException extends RuntimeException {
    }

**写一个全局的异常类**

因为是controller的注解，所以需要在controller的配置文件中，conpent-scan中配置对该异常的文件扫描
    
    /**
     * 配置一个全局的异常
     * 把需要配置的异常在这里进行配置，当抛异常时候，返回前台一个error，前台就可以根据这个返回的code进行判断
     * @RestController 写上以后，下边的方法就不需要写ReponseBody
     *
     * 要使注解生效，在spring-mvc-controller.xml文件需要配置
     */
    @RestControllerAdvice
    public class ClobleHandlerException {
    
    
        /**
         * 自定义的异常
         * @param e
         * @return
         */
        @ExceptionHandler(MyException.class)
        public ResponseServer myExceptionHandler(MyException e){
            e.printStackTrace();
            return  ResponseServer.errorMethod();
        }
    
    
        /**
         * 抛所有的异常
         * @param e
         * @return
         */
        @ExceptionHandler(Exception.class)
        public ResponseServer exceptionHandler(Exception e){
            e.printStackTrace();
            return ResponseServer.errorMethod();
        }
    
    
    }

<context:component-scan base-package="com.fh.exception"/>

**4）写拦截器**

/**
     * 登录拦截，利用ignore来做的，不需要在spring-mvc.xml中配置
     */
    public class LoginInterceptor extends HandlerInterceptorAdapter {
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    
            //1.在这里设置全局的跨域问题，所以在controller层的跨域注解也可以不用写了
            //处理跨域问题
            response.setHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN,"http://localhost:8081");
            //处理客户端传过来的自定义头信息【自定义：从前台地址栏查看，传过来的信息是何种信息，然后添加上，才可以放开拦截，否则就会拦截】
            response.addHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS,"x-auth,content-type,mtoken");
            //处理客户端发过来的put delete【自定义的，从前台发送请求的路径中查看，需要添加何种请求，然后添加上，才可以放开拦截，否则就会拦截】
            response.addHeader(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS,"PUT,POST,DELETE,GET");
            //跨域，如果登录拦截时候，访问不到后台数据，浏览器就会报：No 'Access-Control-Allow-Origin' header is present on the requested ，加上这个就不会报了
            response.addHeader("Access-Control-Allow-Credentials","true");
    
            //2.判断访问的请求是否是：注解@Ignore修饰的方法，如果是的话，说明需要放开拦截
            //获取注解，首先的先获取方法
            HandlerMethod handlerMethod = (HandlerMethod)handler;
            Method method = handlerMethod.getMethod();
            //通过method.isAnnotationPresent()判断该方法是否有@Ignore注解
            if(method.isAnnotationPresent(Ignore.class)){
                //如果有,放开
                return true;
            }
    
    
            //获取session，查看是否有用户登录
            User user = (User) request.getSession().getAttribute(Const.LOGIN_SESSION_USER);
    
    
            if(user == null){
                //证明没有有用户登录,则抛自定义的异常
                throw new MyException();
            }
            return true;
        }
    }

**vue页面配置：  
main.js中**

// vue有一点不好的是，他不能自动把前台cookie发送到服务器，所以需要手动把coookie发送到服务器
    axios.defaults.withCredentials = true

// 定义一个请求拦截器
    axios.interceptors.request.use(function (config) {
      console.log(config)
      return config
    })
    // 定义一个相应拦截器
    axios.interceptors.response.use(function (config) {
      console.log(config)
      // 如果没有登录，就返回错误的code=2000，如果=2000，则证明没有登录，跳到登录页面
      if (config.data.code === 2000) {
        location.href = '/'
      }
      return config
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]: /images/20210913/1639428656b14ed19c197e7dfd72d2a2.png