token代码演示

token代码演示

vue前端

1、页面组件

数据绑定——账号和密码

事件触发——登录

 <el-form-item prop="username">
            <el-input placeholder="请输入账号" prefix-icon="el-icon-user" size="medium" v-model="admin.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" show-password prefix-icon="el-icon-lock" size="medium" v-model="admin.password"  ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%" size="medium" type="primary" @keyup.enter="keyDown" @click="login"  >登录</el-button>
          </el-form-item>

2、Js

data

data() {
    return {
      loginAdmin: {},
      admin: {username : "junli" , password: "123456"},//设置默认的账号密码用于测试使用
    }
  }

点击”登录“的触发函数

login() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          request.post('/admin/login', this.admin).then(res => {
            if (res.code === '200') {
              this.loginAdmin = res.data; 
              this.onSuccess();
            } else {
              this.$notify.error(res.msg)
            }
          })
        }
      })
    },

如下：此时loginAdmind已经从后端获取到数据。（控制台打印）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBDaiACE-1685703375038)(C:\Users\沈礼谦\AppData\Roaming\Typora\typora-user-images\image-20230602180923653.png)]

Springboot后端

control层（调用adminService.login，把 ”实例login“ 返回给前端）

url：”/admin/login“

@ApiOperation("登录方法")
@PostMapping("/login")
public Result login(@RequestBody LoginRequest request) {
    LoginDTO login = adminService.login(request);
    return Result.success(login);
}

service层（验证账号密码，生成token，返回一个LoginDTO类的实例）

@Override
    public LoginDTO login(LoginRequest request) {
        Admin admin = null;
        
        try {
            admin = adminMapper.getByUsername(request.getUsername());
        } catch (Exception e) {
            log.error("根据用户名{} 查询出错", request.getUsername());
            throw new ServiceException("用户名错误");
        }
        
        if (admin == null) {
            throw new ServiceException("用户名或密码错误");
        }
        // 判断密码是否合法
        String securePass = securePass(request.getPassword());
        if (!securePass.equals(admin.getPassword())) {
            throw new ServiceException("用户名或密码错误");
        }
        
        LoginDTO loginDTO = new LoginDTO();
        BeanUtils.copyProperties(admin, loginDTO);

        // 生成token，设置token
        String token = TokenUtils.genToken(String.valueOf(admin.getId()), admin.getPassword());
        loginDTO.setToken(token);

        //生成登录记录
        SimpleDateFormat sdf= new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        loginMapper.save(new Login(admin.getUsername()+"登录", sdf.format(System.currentTimeMillis())));
        return loginDTO;
    }

vue前端

1. 设置一个叫“admin”的浏览器cookie用于跟踪用户的会话状态，其value值为 JSON.stringify(this.loginAdmin)
2. 提示登录成功，页面跳转。

onSuccess() { // 登录成功后触发的
  Cookies.set('admin', JSON.stringify(this.loginAdmin))
  this.$notify.success("登录成功")
  this.$router.push('/')
}