springboot+vue.js实现登录效果（session拦截）

springboot+vue.js实现登录效果（session拦截）

---

GitHub地址：

https://github.com/Guoxxin/logindemo

主要技术实现：

1. springboot
2. vue.js
3. spring-data-jpa
4. mysql

主要流程：

用户在页面输入登录名+密码，通过axios传回后台，后台接收参数进行判断，传回前台登录状态，前台根据返回值判断是否允许该用户进入主页

代码实现：

1. 首先是后台不接数据库，进行单机判断

  
    
系统登录
    
      
    
    
      
    
    记住密码
    
      登录
    
  

这边我们采用了element做我们的登录模板样式，真心舒服，后台判断

//controller.java
@PostMapping("/login")
    public Map login(@RequestBody Map user){
        Map map = new HashMap<>(6) ;
        if("guo".equals(user.get("username"))&&"123".equals(user.get("password"))){
            map.put("flag",true) ;
            map.put("msg","登录成功") ;
            return map ;
        }
        map.put("flag","false") ;
        map.put("msg","用户名或密码错误") ;
        return map ;
    }

前台获取后台所传回的msg和flag进行判断登录

2. 接下来是我们加了数据库之后进行判断登录。用户名在数据库中已存在且密码正确我们才予以登录

//js
submitClick: function () {
        var _this = this;
        this.loading = true;
        axios.post('loginVerify', {
          "loginname": this.loginForm.username,
          "password": this.loginForm.password
        }).then(resp=> {
          _this.loading = false;
          if (resp.status == 200) {
            //成功
            var json = resp.data;
            if (json.status == 200) {
              _this.$router.replace({path: '/HelloWorld'});
            } else {
              _this.$alert('登录失败!', '失败!');
            }
          } else {
            //失败
            _this.$alert('登录失败!', '失败!');
          }
        },resp=> {
          _this.loading = false;
          _this.$alert('找不到服务器⊙﹏⊙∥!', '失败!');
        });
      },

在上方登录按钮中click属性将getLogin（）换为submitClick即可使用

//controller
@PostMapping("/loginVerify")
    public Result login(@RequestBody User user, HttpSession session){
        System.out.println(user.getLoginname());
        boolean isLogin=userService.verifyLogin(user);
        System.out.println(isLogin);
        if (isLogin){
            session.setAttribute(WebSecurityConfig.SESSION_KEY,user.getLoginname());
            return new Result(200,"登陆成功",null);
        }else {
            return new Result(500,"登录失败",null);
        }
    }
//service
public boolean verifyLogin(User user){
        List userList = userRepository.findByLoginnameAndPassword(user.getLoginname(),user.getPassword());
        return userList.size()>0;
    }
//repository
public interface UserRepository extends JpaRepository {
    public List findByLoginnameAndPassword(String loginname, String password);
}

这样我们的登录功能就ok了！！！

感谢阅读！