前后端分离登录验证功能实现案例

一、后端

    @GetMapping("login")
    public ResponseDTO login(String userName, String password, HttpServletRequest request){
        QueryWrapper<MyAppUser> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("user_name",userName).eq("password",password);
        MyAppUser one = myAppUserService.getOne(queryWrapper);
        if(one!=null){
            HttpSession session = request.getSession();
            session.setAttribute("userInfo",one);
            session.setMaxInactiveInterval(2*30);
            return ResponseDTO.success(one);
        }else {
            return ResponseDTO.failed("用户名或密码错误！");
        }
    }

二、前端
index.tsx

import styles from './index.less';
import { Modal, Checkbox} from 'antd-mobile';
import {login} from '@/pages/index/users/service'
import {setCookie} from '@/utils/utils'
const prompt = Modal.prompt;

let checked = false;

export default function IndexPage() {
  const handleLogin = async (userName,password) =>{
    console.log(`userName: ${userName}, password: ${password}`);
    const response = await login(userName,password);
    console.log(response);
    if(response.status===1){
      sessionStorage.setItem('user',JSON.stringify(response.data));
      console.log('checked',checked);
      setCookie('user',JSON.stringify(response.data),14);
      window.location.href = '/index/home';
    }
  };



  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <h1 className={styles.login} onClick={() => prompt(
        'Login',
        'Please input login information',
        (login, password) => {handleLogin(login,password)},
        'login-password',
        null,
        ['Please input name', 'Please input password'],
      )}>登录</h1>
      <h1 className={styles.register} onClick={()=>{window.location.href='/index/register'}}>注册</h1>
      <Checkbox onChange={e=>checked=e.target.checked}>两周内免登录</Checkbox>
    </div>
  );
}

.title {
  text-align: center;
  background: rgb(121, 242, 157);
}

.login {
  text-align: center;
  background: rgb(0, 102, 157);
}

.register {
  text-align: center;
  background: rgb(200, 50, 0);
}

一开始，试图通过document.cookie来获取cookie，发现得到的是空字符串，然后只好想办法去网上查了一下，发现是set-cookie的属性是HttpOnly，所以取不到这个cookie，为的是方式XSS攻击。然后找了一个cookie 工具类，在登录成功的时候再设置一下cookie，然后通过getCookie也能得到。浏览器也能看到cookie的过期时间。

Cookie工具类

export function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname+"="+cvalue+"; "+expires;
}

export function removeCookie(key){
  setCookie(key,"",-1); // 把cookie设置为过期
}

export function checkCookie(){
  var user=getCookie("username");
  if (user!=""){
    alert("欢迎 " + user + " 再次访问");
  }
  else {
    user = prompt("请输入你的名字:","");
    if (user!="" && user!=null){
      setCookie("username",user,30);
    }
  }
}

export function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
  }
  return "";
}

因为再命名空间里的这个方法一直都会执行，所以在这里判断用户是否已经登录过

subscriptions:{
    setup({dispatch,history}){
      return history.listen(({pathname})=>{
        console.log(pathname,history);
        if(pathname!=='/' && pathname!=='/index/register'){
          console.log('cookie,',getCookie('user'),'JSESSIONID',getCookie('JSESSIONID'));
          const userInfo = JSON.parse(sessionStorage.getItem('user'));
          console.log(userInfo);
          if(userInfo===null){
            alert('检测到您未登录，请先登录或注册');
            window.location.href = '/myapp';
          }
        }
        if(pathname==='/index/users'){
          dispatch({type: 'getPage',payload:{current:1,size:6}});
        }
      })
    },
  },

用sessionStorage，一关闭浏览器就会清除，所以当sessionStorage没数据的时候再去cookie里查看用户有没有设置免登录（cookie设置用户信息），如果cookie里没有再让用户去登录页登录。