前后端连接完后的各种安全问题

前后端连接完后的各种安全问题：

当我们完成前后端链接后，这只是第一步，接下来各种安全问题才是前后端交互的重中之重。

后端：

一.管理员

当前端把账号密码之类的用户信息传来后端后，我们还需要一个管理员来保存这些数据，而我们要返回给前端保存在浏览器的数据是管理员的数据，这样把数据封装到类里，方便我们进行各种操作。

Admin：

java 复制代码

public class Admin {
    private int id;
    private String account;
    private String password;
    private String gender;
    private String phone;
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Admin(){};
    public Admin(int id,String account,String password,String gender,String phone,String name){
        this.account=account;
        this.id=id;
        this.password=password;
        this.phone=phone;
        this.gender=gender;
        this.name=name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getAccount() {
        return account;
    }

    public void setAccount(String account) {
        this.account = account;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }
}

二.dao层

Dao中查到数据后把其交给管理员：

java 复制代码

			ResultSet rs=ps.executeQuery();
            //查到后把数据交给管理员
            while(rs.next()){
                admin=new Admin();
                admin.setId(rs.getInt("id"));
                admin.setAccount(rs.getString("account"));
                admin.setGender(rs.getString("gender"));
                admin.setPassword(rs.getString("password"));
                admin.setPhone(rs.getString("phone"));
                admin.setName(rs.getString("name"));
            }
            return admin;

这里返回一个管理员类，这是因为最终返回前端的信息一般都有一个格式就是

(code,desc,result)，code表示当前链接状况，desc表示要提示的信息，result里面是要返回的保存数据的类，也就是管理员类

三.Servlet

所以Servlet中接收到前端的数据后然后交给dao层判断，如果dao层返回了一个admin说明在数据库查到了该用户，如果返回admin是空说明没查到：

java 复制代码

        //接收前端提交的数据
        String account=req.getParameter("account");
        String password=req.getParameter("password");
        //调用其他的java程序处理 例如调用dao层 与数据库交互
        LoginDao loginDao=new LoginDao();
        Result<Admin> result=null;
        try {
            Admin admin=loginDao.login(account,password);
            //向前端做出相应
            if(admin!=null){
                result=new Result<>(200,"登录成功",admin);
            }else {
                result=new Result<>(201,"账号或密码错误",null);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
            result=new Result<>(500,"系统忙",null);
        }
resp.getWriter().print(newObjectMapper().writeValueAsString(result));

四.Result

其中Result就是保存code，desc，result的：

java 复制代码

public class Result<T> {
    private int code;
    private String desc;
    private T result;

    public Result(){};

    public Result(int code,String desc,T result){
        this.code=code;
        this.desc=desc;
        this.result=result;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    public T getResult() {
        return result;
    }

    public void setResult(T result) {
        this.result = result;
    }
}

前端：

一.接收后端的响应：

我们需要把后端的数据送到session（会话）或者cookie里，(cookie可以一直保存，会话会随着浏览器关闭而消失)。然后前端就可以随时从cookie或者会话中得到这些数据

js 复制代码

		   //与后端进行交互
		   this.$http.post("login","account="+this.form.account+"&password="+this.form.password).then((resp)=>{
			   //根据后端响应回来的结果进行处理
			   if(resp.data.code==200){
				   //登陆成功
				sessionStorage.setItem("account",resp.data.result.account);
				sessionStorage.setItem("gender",resp.data.result.gender);
				sessionStorage.setItem("name",resp.data.result.name);
				sessionStorage.setItem("phone",resp.data.result.phone);
				sessionStorage.setItem("id",resp.data.result.id);
				this.$router.push("/viewmain");
			   }else if(resp.data.code==201){
				   this.$message({message:resp.data.desc,type:'warning'});
				   return;
			   }else if(resp.data.code==500){
				   this.$message({message:resp.data.desc,type:'warning'});
				   return;
			   }
		   });

二.从会话中获得信息显示在浏览器：

html 复制代码

		        <span>{{form.user_name}}</span>

js 复制代码

 export default{
	 data(){
		 return{
			 form:{
			 	user_name:"",
			 }
		 }
	 },
	 methods:{
	 },
	 mounted(){
		this.form.user_name=sessionStorage.getItem("name");
	 }
 }

三.路由导航卫士：

为了防止未登录便进入到主菜单等vue，我们需要路由导航卫士检测如果会话中没有保存登陆账户说明没有登录上，所以不可以进入到除login组件以外的组件。0

js 复制代码

//每发生一次路由跳转时，自动触发beforeEach()
rout.beforeEach((to,from,next)=>{
	if(to.path=='/login'){	//如果访问登陆组件，不需要任何判断，直接放行
		return next();
	}else{
		var account=window.sessionStorage.getItem("account");
		if(account==null){	//用户信息为空，说明用户没有登录
			return next("/login");
		}else{	//说明用户以及登录
			next();
		}
	}
})