vue-elementui-template 中登录的前后端实现

关于vue-elementui-template 中登录的请求思路参考vue-admin-template学习（一），本文直接上代码，加少量解释。后端代码是通用的，前端的代码，其中的参数名我根据另外一个后端项目进行了更改（如username改成了phone，user用户具体成了teacher），虽然参数名有所改变，但是道理都是一样的。

后端

1.项目目录porm中添加依赖

<dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.auth0</groupId>
            <artifactId>java-jwt</artifactId>
            <version>3.5.0</version>
        </dependency>
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.1.0</version>
        </dependency>

2.UserController

@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;

    Logger logger = LoggerFactory.getLogger(UserController.class);

    @RequestMapping("/login")
    public ResultResponse login(@RequestBody VoUser user){
        ResultResponse res = new ResultResponse();
        try{
//            logger.info("传进来的user:" + user);
            // 调用UserService完成username和password的验证
            VoUser u = this.userService.verify(user);
//            logger.info("经过验证后的user:" + user);
            // 根据验证结果，组合响应对象返回
            if (u != null){
                // 创建一个token数据，封装到res对象中
                String token = JwtUtil.sign(user.getUsername(),"-1");
                res.setCode(Constants.STATUS_OK);
                res.setMessage(Constants.MESSAGE_OK);
                res.setData(new VoToken(token));
            }else{
                res.setCode(Constants.STATUS_FALL);
                res.setMessage(Constants.MESSAGE_FALL + "用户名和密码不匹配!");
                res.setData("fail");
            }
        } catch (Exception e){
            res.setCode(Constants.STATUS_FALL);
            res.setMessage(Constants.MESSAGE_FALL + e.getMessage());
            res.setData("fail");
            e.printStackTrace();
        }

        return res;
    }

    @RequestMapping("/info")
    public ResultResponse info( String token){
        ResultResponse res = new ResultResponse();
        logger.info("传进来的token：" + token);
        // 验证token的合法和有效性
        String tokenValue = JwtUtil.verity(token);  // success:zhangsan1
        if(tokenValue != null && tokenValue.startsWith(JwtUtil.TOKEN_SUCCESS)){
            // 如果ok ，返回需要的用户信息
            String username = tokenValue.replaceFirst(JwtUtil.TOKEN_SUCCESS,"");
//            VoUser user = this.userService.searchUserByUserName(username);
            VoUserInfo info = new VoUserInfo();
            info.setAvatar("https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
            info.setIntroduction("测试用户");
            info.setName(username);
            List<String> roles = Arrays.asList("admin");
            info.setRoles(roles);

            res.setData(info);
            res.setMessage(Constants.MESSAGE_OK);
            res.setCode(Constants.STATUS_OK);
        } else{
            // 否则：500
            res.setCode(Constants.STATUS_FALL);
            res.setMessage(Constants.MESSAGE_FALL);
        }

        return res;
    }

    @RequestMapping("logout")
    public ResultResponse logout( String token ){
        ResultResponse res = new ResultResponse();
        // 验证token的合法和有效性
        String tokenValue = JwtUtil.verity(token);
        // 获取token中的用户名
        String username = tokenValue.replaceFirst(JwtUtil.TOKEN_SUCCESS,"");
        // 移除session中的登记标记（或者redis中的登陆标记）
        res.setMessage("logout success");
        res.setData("logout success");
        res.setCode(Constants.STATUS_OK);

        return res;
    }
}

3.IUserServiceImpl
因为没写mapper映射文件，在Service层添加一个代码块用来生成登录数据。

@Service
public class IUserServiceImpl implements IUserService {
    private Map<String,VoUser> users = new HashMap<>();
    {
        // 代码块
        VoUser user = null;
        for (int i=0;i<10;i++){
            user = new VoUser("zhangsan"+i,"password"+i);
            users.put(user.getUsername(),user);
        }
    }

    public VoUser verify(VoUser user){
        VoUser u = null;
        u = this.users.get(user.getUsername());
        if (u != null){
            if(!u.getPassword().equals(user.getPassword())){
                u = null;
            }
        }
        return u;
    }
}

4.dto文件夹中的
（1）VoToken

@Data
@NoArgsConstructor
@ToString
public class VoToken implements java.io.Serializable{
    private String token;

    public VoToken(String token) {
        this.token = token;
    }

    public String getToken() {
        return token;
    }

    public void setToken(String token) {
        this.token = token;
    }
}

（2）VoUser

@ToString
public class VoUser implements java.io.Serializable{
    private String username;

    private String password;

    public VoUser(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

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

(3) VoUserInfo

public class VoUserInfo {
    private List<String>  roles;
    private String introduction;
    private String avatar;
    private String name;


    @Override
    public String toString() {
        return "VoUserInfo{" +
                "roles=" + roles +
                ", introduction='" + introduction + '\'' +
                ", avatar='" + avatar + '\'' +
                ", name='" + name + '\'' +
                '}';
    }

    public List<String> getRoles() {
        return roles;
    }

    public void setRoles(List<String> roles) {
        this.roles = roles;
    }

    public String getIntroduction() {
        return introduction;
    }

    public void setIntroduction(String introduction) {
        this.introduction = introduction;
    }

    public String getAvatar() {
        return avatar;
    }

    public void setAvatar(String avatar) {
        this.avatar = avatar;
    }

    public String getName() {
        return name;
    }

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

5.ResultResponse

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class ResultResponse implements java.io.Serializable{

    private int code;
    private String message;
    private Object data;

    public int getCode() {
        return code;
    }

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

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

6.utils
(1)Constants

public final class Constants {
    public final static int STATUS_OK = 20000;
    public final static int STATUS_FALL = 500;
    public final static String MESSAGE_OK = "success";
    public final static String MESSAGE_FALL = "fail";
}

（2）JwtUtil

public class JwtUtil {
    public static final String TOKEN_LOGIN_NAME = "loginName";
    public static final String TOKEN_LOGIN_ID = "userId";
    public static final String TOKEN_SUCCESS = "success";
    public static final String TOKEN_FALL = "fail";

    private static final long EXPIRE_TIME = 24*60*60*1000;

    private static final String TOKEN_SECRET = "joijsdfjlsjfljfljl15135313135";

    public static String sign(String username,String userId){
        // 过期时间
        Date date = new Date(System.currentTimeMillis() + EXPIRE_TIME);
        // 私钥及加密算法
        Algorithm algorithm = Algorithm.HMAC256(TOKEN_SECRET);
        // 设置头信息
        HashMap<String,Object> header = new HashMap<>(2);
        header.put("typ","jwt");
        header.put("alg","HS256");
        // 附带username和userID生成签名
        return JWT.create().withHeader(header).withClaim(TOKEN_LOGIN_NAME,username)
                .withClaim(TOKEN_LOGIN_ID,userId).withExpiresAt(date).sign(algorithm);
    }

    public static String verity(String token){
        String result = TOKEN_SUCCESS;
        try{
            Algorithm algorithm = Algorithm.HMAC256(TOKEN_SECRET);
            JWTVerifier verifier = JWT.require(algorithm).build();
            DecodedJWT jwt = verifier.verify(token);
            result += jwt.getClaims().get(TOKEN_LOGIN_NAME).asString();
            return result;  // success:username
        } catch (IllegalArgumentException e){
            return  TOKEN_FALL + e.getMessage();
        } catch (JWTVerificationException e){
            return  TOKEN_FALL + e.getMessage();
        } catch (Exception e){
            return  TOKEN_FALL + e.getMessage();
        }
    }
}

前端

前端需要修改几个地方
1.

2. /views/login/index

3./store/modules/user.js

4./api/user.js

实现注册功能

1.先创建页面，设置路由然后修改下面的配置

2.response响应，把对状态码的检验注释掉，直接返回res

3.
4.

有疑问欢迎在评论区讨论！