springboot+vue.js实现登录效果（session拦截）
GitHub地址：
https://github.com/Guoxxin/logindemo
主要技术实现：
- springboot
- vue.js
- spring-data-jpa
- mysql
主要流程：
用户在页面输入登录名+密码，通过axios传回后台，后台接收参数进行判断，传回前台登录状态，前台根据返回值判断是否允许该用户进入主页
代码实现：
- 首先是后台不接数据库，进行单机判断
<el-form :rules="rules" class="login-container" label-position="left"
label-width="0px" v-loading="loading">
<h3 class="login_title">系统登录</h3>
<el-form-item prop="account">
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>
<el-form-item style="width: 100%">
<el-button type="primary" @click.native.prevent="getLogin()" style="width: 100%">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
import axios from 'axios'
export default{
data(){
return {
rules: {
account: [{required: true, message: '请输入用户名', trigger: 'blur'}],
checkPass: [{required: true, message: '请输入密码', trigger: 'blur'}]
},
checked: true,
loginForm: {
username: 'guo',
password: '123',
isLogin:true
},
loading: false
}
},
methods: {
getLogin() { //方法
console.log(this.formLabelAlign);
let name = this.loginForm.username;
let pass = this.loginForm.password;
if ("" != name && "" != pass) {
axios.post("login", {
"username": this.loginForm.username,
"password": this.loginForm.password,
}).then((response) => {
console.log(response.data)
if (response.data.flag == true) {
alert("登录成功");
this.$router.replace({path: '/HelloWorld'});
} else {
alert("登录失败")
}
})
}
},
</script>
这边我们采用了element做我们的登录模板样式，真心舒服，后台判断
//controller.java
@PostMapping("/login")
public Map<String,Object> login(@RequestBody Map user){
Map<String,Object> 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进行判断登录
- 接下来是我们加了数据库之后进行判断登录。用户名在数据库中已存在且密码正确我们才予以登录
//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<User> userList = userRepository.findByLoginnameAndPassword(user.getLoginname(),user.getPassword());
return userList.size()>0;
}
//repository
public interface UserRepository extends JpaRepository<User,Integer> {
public List<User> findByLoginnameAndPassword(String loginname, String password);
}
这样我们的登录功能就ok了！！！
