最近在开发Vue+Springboot的前后端分离项目时,为了防止用户没有登录,直接输入网址越权访问登录后的网页,所以打算想个办法拦截,一开始打算在Springboot处写一个拦截器,但由于是前后端分离的模板,就打算在Vue处写个路由拦截器
SpringBoot处的登录逻辑
前后端采用异步传输的方式,这里返回的Result是我自己编写的一个判断类,用以返回前端,前端获取返回的判断类,根据起变量的值进行逻辑判断。
status:默认为true,当controller判断成立时,不进行设置,不成立时设置为false
msg:用来存字符串信息,前端获取后用来给弹出消息赋值
users:用来存登录成功后的用户姓名,前端获取用以存token
@Data
public class Result {
private Boolean status=true;
private String msg;
private String users;
public String getUsers() {
return users;
}
public void setUsers(String users) {
this.users = users;
}
public Boolean getStatus() {
return status;
}
public void setStatus(Boolean status) {
this.status = status;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
返回一个判断类
//登录
@PostMapping("/user/login")
public Result login(@RequestBody Map<String, String> params){
Result result = new Result();
Admin admin =null;
String username=params.get("username");
String password=params.get("password");
admin=goodsService.login(username,password);
if (admin!=null) {
result.setMsg("登录成功");
result.setUsers(username);
}else {
result.setStatus(false);
result.setMsg("登录失败");
}
return result;
}
Vue处的逻辑判断
其中的关键在于这串代码,它将获取来的用户名信息存到SessionStorage中
window.sessionStorage.setItem("token",res.data.users)
submitForm(){
this.$http.post("http://localhost:8989/user/login",this.ruleForm).then(res=>{
if (res.data.status){
this.$message({
message: '恭喜你,'+res.data.msg,
type: 'success',
});
console.log(res)
window.sessionStorage.setItem("token",res.data.users)
this.$router.push("/index");
}else {
this.$message.error(res.data.msg);
}
});
}
这时候还需要到index.js文件下进行一些设置,将原来的设置成这样:
//原来的
export default new Router
新的
const router = new Router
设置路由导航,加在index.js的最下面,to代表需要访问的路由地址,from代表从哪个路由跳转而来,next()是放行函数,表示放行路由。
获取先前存储的token,判断是否存在,如果不是经过登录而来的,token就为null,这时候给他返回到登录页面
//导航守卫
router.beforeEach((to,from,next)=>{
if (to.path==='/login') return next();
//获取token
const tokenStr= window.sessionStorage.getItem('token')
if(!tokenStr) return next('/login')
next()
})
export default router