• 项目实战——实现注册和登录模块

    目录

    一、整体框架

    二、实现JwtToken验证

     1、添加依赖

    2、编写、修改相关类

     三、实现后端 API

     四、实现前端的登录，注册界面


    ps：本篇文章篇幅较长，且难度有所提升，希望大家耐心看完，种一棵树最好的时间是十年前，其次是现在

    一、整体框架

    4.2 实现注册与登录模块

    二、实现JwtToken验证

     1、添加依赖

    在 pom.xml 中添加下列依赖：

    jjwt-api
    jjwt-impl
    jjwt-jackson

    1. <dependency>
    2.     <groupId>io.jsonwebtokengroupId>
    3.     <artifactId>jjwt-apiartifactId>
    4.     <version>0.11.2version>
    5. dependency>
    6. <dependency>
    7.     <groupId>io.jsonwebtokengroupId>
    8.     <artifactId>jjwt-implartifactId>
    9.     <version>0.11.2version>
    10.     <scope>runtimescope>
    11. dependency>
    12. <dependency>
    13.     <groupId>io.jsonwebtokengroupId>
    14.     <artifactId>jjwt-jacksonartifactId>
    15.     <version>0.11.2version>
    16.     <scope>runtimescope>
    17. dependency>
    18.

    jwt添加依赖

    2、编写、修改相关类

    实现 JwtUtil 类
    在 backend 目录下创建软件包 utils 并创建 JwtUtil 类。
    JwtUtil 类为jwt 工具类，用来创建、解析 jwt token

    1. package com.kob.backend.utils;
    2.  
    3. import io.jsonwebtoken.Claims;
    4. import io.jsonwebtoken.JwtBuilder;
    5. import io.jsonwebtoken.Jwts;
    6. import io.jsonwebtoken.SignatureAlgorithm;
    7. import org.springframework.stereotype.Component;
    8.  
    9. import javax.crypto.SecretKey;
    10. import javax.crypto.spec.SecretKeySpec;
    11. import java.util.Base64;
    12. import java.util.Date;
    13. import java.util.UUID;
    14.  
    15. @Component
    16. public class JwtUtil {
    17.     public static final long JWT_TTL = 60 * 60 * 1000L * 24 * 14;  // 有效期14天
    18.     public static final String JWT_KEY = "SDFGjhdsfalshdfHFdsjkdsfds121232131afasdfac";
    19.  
    20.     public static String getUUID() {
    21.         return UUID.randomUUID().toString().replaceAll("-", "");
    22.     }
    23.  
    24.     public static String createJWT(String subject) {
    25.         JwtBuilder builder = getJwtBuilder(subject, null, getUUID());
    26.         return builder.compact();
    27.     }
    28.  
    29.     private static JwtBuilder getJwtBuilder(String subject, Long ttlMillis, String uuid) {
    30.         SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;
    31.         SecretKey secretKey = generalKey();
    32.         long nowMillis = System.currentTimeMillis();
    33.         Date now = new Date(nowMillis);
    34.         if (ttlMillis == null) {
    35.             ttlMillis = JwtUtil.JWT_TTL;
    36.         }
    37.  
    38.         long expMillis = nowMillis + ttlMillis;
    39.         Date expDate = new Date(expMillis);
    40.         return Jwts.builder()
    41.                 .setId(uuid)
    42.                 .setSubject(subject)
    43.                 .setIssuer("sg")
    44.                 .setIssuedAt(now)
    45.                 .signWith(signatureAlgorithm, secretKey)
    46.                 .setExpiration(expDate);
    47.     }
    48.  
    49.     public static SecretKey generalKey() {
    50.         byte[] encodeKey = Base64.getDecoder().decode(JwtUtil.JWT_KEY);
    51.         return new SecretKeySpec(encodeKey, 0, encodeKey.length, "HmacSHA256");
    52.     }
    53.  
    54.     public static Claims parseJWT(String jwt) throws Exception {
    55.         SecretKey secretKey = generalKey();
    56.         return Jwts.parserBuilder()
    57.                 .setSigningKey(secretKey)
    58.                 .build()
    59.                 .parseClaimsJws(jwt)
    60.                 .getBody();
    61.     }
    62. }

     jwt-utils

     实现 JwtAuthenticationTokenFilter 类
    在 backend 的 config 目录下创建 cinfig 软件包，并创建 JwtAuthenticationTokenFilter 类。
    实现 JwtAuthenticationTokenFilter 类，用来验证 jwt token ，如果验证成功，则将 User 信息注入上下文中。

    1. package com.kob.backend.config.filter;
    2.  
    3.  
    4. import com.kob.backend.mapper.UserMapper;
    5. import com.kob.backend.pojo.User;
    6. import com.kob.backend.service.impl.utils.UserDetailsImpl;
    7. import com.kob.backend.utils.JwtUtil;
    8. import com.sun.istack.internal.NotNull;
    9. import io.jsonwebtoken.Claims;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
    12. import org.springframework.security.core.context.SecurityContextHolder;
    13. import org.springframework.stereotype.Component;
    14. import org.springframework.util.StringUtils;
    15. import org.springframework.web.filter.OncePerRequestFilter;
    16.  
    17. import javax.servlet.FilterChain;
    18. import javax.servlet.ServletException;
    19. import javax.servlet.http.HttpServletRequest;
    20. import javax.servlet.http.HttpServletResponse;
    21. import java.io.IOException;
    22.  
    23. @Component
    24. public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {
    25.     @Autowired
    26.     private UserMapper userMapper;
    27.  
    28.     @Override
    29.     protected void doFilterInternal(HttpServletRequest request, @NotNull HttpServletResponse response, @NotNull FilterChain filterChain) throws ServletException, IOException {
    30.         String token = request.getHeader("Authorization");
    31.  
    32.         if (!StringUtils.hasText(token) || !token.startsWith("Bearer ")) {
    33.             filterChain.doFilter(request, response);
    34.             return;
    35.         }
    36.  
    37.         token = token.substring(7);
    38.  
    39.         String userid;
    40.         try {
    41.             Claims claims = JwtUtil.parseJWT(token);
    42.             userid = claims.getSubject();
    43.         } catch (Exception e) {
    44.             throw new RuntimeException(e);
    45.         }
    46.  
    47.         User user = userMapper.selectById(Integer.parseInt(userid));
    48.  
    49.         if (user == null) {
    50.             throw new RuntimeException("用户名未登录");
    51.         }
    52.  
    53.         UserDetailsImpl loginUser = new UserDetailsImpl(user);
    54.         UsernamePasswordAuthenticationToken authenticationToken =
    55.                 new UsernamePasswordAuthenticationToken(loginUser, null, null);
    56.  
    57.         SecurityContextHolder.getContext().setAuthentication(authenticationToken);
    58.  
    59.         filterChain.doFilter(request, response);
    60.     }
    61. }

    在这里插入图片描述

     配置config.SecurityConfig类
    放行登录、注册等接口。

    1. package com.kob.backend.config;
    2.  
    3. import com.kob.backend.config.filter.JwtAuthenticationTokenFilter;
    4. import org.springframework.beans.factory.annotation.Autowired;
    5. import org.springframework.context.annotation.Bean;
    6. import org.springframework.context.annotation.Configuration;
    7. import org.springframework.http.HttpMethod;
    8. import org.springframework.security.authentication.AuthenticationManager;
    9. import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    10. import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
    11. import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    12. import org.springframework.security.config.http.SessionCreationPolicy;
    13. import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
    14. import org.springframework.security.crypto.password.PasswordEncoder;
    15. import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
    16.  
    17. @Configuration
    18. @EnableWebSecurity
    19. public class SecurityConfig extends WebSecurityConfigurerAdapter {
    20.     @Autowired
    21.     private JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter;
    22.  
    23.     @Bean
    24.     public PasswordEncoder passwordEncoder() {
    25.         return new BCryptPasswordEncoder();
    26.     }
    27.  
    28.     @Bean
    29.     @Override
    30.     public AuthenticationManager authenticationManagerBean() throws Exception {
    31.         return super.authenticationManagerBean();
    32.     }
    33.  
    34.     @Override
    35.     protected void configure(HttpSecurity http) throws Exception {
    36.         http.csrf().disable()
    37.                 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
    38.                 .and()
    39.                 .authorizeRequests()
    40.                 .antMatchers("/user/account/token/", "/user/account/register/").permitAll()
    41.                 .antMatchers(HttpMethod.OPTIONS).permitAll()
    42.                 .anyRequest().authenticated();
    43.  
    44.         http.addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
    45.     }
    46. }

    security-config

     三、实现后端 API

    将数据库中的 id 域变为自增。
    在 pojo.User 类中添加注解：@TableId(type = IdType.AUTO)
    右击 user ，点击 修改表 ，双击 id ，选择 自动增加。同时添加一列 photo，类型设置为 varchar(1000) ，用来存储照片，默认值可以设置为自己的头像。

    修改数据库

     修改 User ，添加 photo

    1. package com.kob.backend.pojo;
    2. //与数据库中的表对应
    3. import com.baomidou.mybatisplus.annotation.IdType;
    4. import com.baomidou.mybatisplus.annotation.TableId;
    5. import lombok.AllArgsConstructor;
    6. import lombok.Data;
    7. import lombok.NoArgsConstructor;
    8.  
    9. @Data
    10. @NoArgsConstructor
    11. @AllArgsConstructor
    12. public class User {
    13.     @TableId(type = IdType.AUTO)
    14.     private Integer id;
    15.     private String username;
    16.     private String password;
    17.     private String photo;
    18. }

    修改user

     实现接口API
    实现API需要三个相关类或接口：

    在 service 下创建一个接口。
    在 service 下创建一个类实现这个接口。
    在 controller 下创建一个类进行操作。

    实现 LoginService
    验证用户名密码，验证成功后返回 jwt token（令牌）

    创建接口：在 service下 创建 user 创建 account 新建一个接口 LoginService

    1. package com.kob.backend.service.user.account;
    2.  
    3. import java.util.Map;
    4.  
    5. public interface LoginService {
    6.     public Map getToken(String username, String password);
    7.  
    8. }

    login接口

     创建实现类：在 service下 impl 下创建 user 创建 account 新建一个实现类LoginServiceImpl

    1. package com.kob.backend.service.impl.user.account;
    2.  
    3. import com.kob.backend.pojo.User;
    4. import com.kob.backend.service.impl.utils.UserDetailsImpl;
    5. import com.kob.backend.service.user.account.LoginService;
    6. import com.kob.backend.utils.JwtUtil;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.boot.autoconfigure.neo4j.Neo4jProperties;
    9. import org.springframework.security.authentication.AuthenticationManager;
    10. import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
    11. import org.springframework.security.core.Authentication;
    12. import org.springframework.stereotype.Service;
    13.  
    14. import java.util.HashMap;
    15. import java.util.Map;
    16.  
    17. @Service
    18. public class LoginServiceImpl implements LoginService {
    19.  
    20.     @Autowired
    21.     private AuthenticationManager authenticationManager;
    22.  
    23.     @Override
    24.     public Map getToken(String username, String password) {
    25.         UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(username, password);
    26.  
    27.         Authentication authenticate = authenticationManager.authenticate(authenticationToken);
    28.         UserDetailsImpl loginUser = (UserDetailsImpl) authenticate.getPrincipal();
    29.         User user = loginUser.getUser();
    30.         String jwt = JwtUtil.createJWT(user.getId().toString());
    31.  
    32.         Map map = new HashMap<>();
    33.         map.put("error_message", "success");
    34.         map.put("token", jwt);
    35.  
    36.         return map;
    37.     }
    38. }

    login实现类

     创建controller：在 controller 创建 user 创建 account 新建一个LoginController

    1. package com.kob.backend.controller.user.account;
    2.  
    3. import com.kob.backend.service.user.account.LoginService;
    4. import org.springframework.beans.factory.annotation.Autowired;
    5. import org.springframework.web.bind.annotation.PostMapping;
    6. import org.springframework.web.bind.annotation.RequestParam;
    7. import org.springframework.web.bind.annotation.RestController;
    8.  
    9. import java.util.Map;
    10.  
    11. @RestController
    12. public class LoginController {
    13.  
    14.     @Autowired
    15.     private LoginService loginService;
    16.  
    17.     @PostMapping("/user/account/token/")
    18.     public Map getToken(@RequestParam Map map) {
    19.         String username = map.get("username");
    20.         String password = map.get("password");
    21.  
    22.         System.out.println(username + ' ' + password);
    23.         return loginService.getToken(username, password);
    24.     }
    25. }

    在这里插入图片描述

     配置InforService类
    根据令牌返回用户信息。

    创建接口：在 service下 创建 user 创建 account 新建一个接口 InfoService

    1. package com.kob.backend.service.user.account;
    2.  
    3. import java.util.Map;
    4.  
    5. public interface InfoService {
    6.     public Map getInfo();
    7. }

    在这里插入图片描述

     创建实现类：在 service下 impl 下创建 user 创建 account 新建一个实现类InfoServiceImpl

    1. package com.kob.backend.service.impl.user.account;
    2.  
    3. import com.kob.backend.pojo.User;
    4. import com.kob.backend.service.impl.utils.UserDetailsImpl;
    5. import com.kob.backend.service.user.account.InfoService;
    6. import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
    7. import org.springframework.security.core.context.SecurityContextHolder;
    8. import org.springframework.stereotype.Service;
    9.  
    10. import java.util.HashMap;
    11. import java.util.Map;
    12. @Service
    13. public class InfoServiceImpl implements InfoService {
    14.  
    15.     /**
    16.      * 根据token返回用户信息
    17.      * @return map存储的信息
    18.      */
    19.     @Override
    20.     public Map getInfo() {
    21.         UsernamePasswordAuthenticationToken authentication = (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
    22.  
    23.         UserDetailsImpl loginUser = (UserDetailsImpl) authentication.getPrincipal();
    24.         User user = loginUser.getUser();
    25.  
    26.         Map map = new HashMap<>();
    27.         map.put("error_message", "success");
    28.         map.put("id", user.getId().toString());
    29.         map.put("username", user.getUsername());
    30.         map.put("photo", user.getPhoto());
    31.         return map;
    32.     }
    33. }

    在这里插入图片描述

     创建controller：在 controller 创建 user 创建 account 新建一个InfoController

    1. package com.kob.backend.controller.user.account;
    2.  
    3. import com.kob.backend.service.user.account.InfoService;
    4. import org.springframework.beans.factory.annotation.Autowired;
    5. import org.springframework.web.bind.annotation.GetMapping;
    6. import org.springframework.web.bind.annotation.RestController;
    7.  
    8. import java.util.Map;
    9.  
    10. @RestController
    11. public class InfoController {
    12.  
    13.     @Autowired
    14.     private InfoService infoService;
    15.  
    16.     @GetMapping("/user/account/info/")
    17.     public Map getInfo() {
    18.         return infoService.getInfo();
    19.     }
    20. }

    在这里插入图片描述

     配置RegisterService类
    注册账号

    创建接口：在 service下 创建 user 创建 account 新建一个接口 RegisterService

    1. package com.kob.backend.service.user.account;
    2.  
    3. import java.util.Map;
    4.  
    5. public interface RegisterService {
    6.     public Map register(String username, String password, String confirmedPassword);
    7. }

    在这里插入图片描述

     创建实现类：在 service下 impl 下创建 user 创建 account 新建一个实现类RegisterServiceImpl

    1. package com.kob.backend.service.impl.user.account;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.kob.backend.mapper.UserMapper;
    5. import com.kob.backend.pojo.User;
    6. import com.kob.backend.service.user.account.RegisterService;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.security.crypto.password.PasswordEncoder;
    9. import org.springframework.stereotype.Service;
    10.  
    11. import java.util.HashMap;
    12. import java.util.List;
    13. import java.util.Map;
    14.  
    15. @Service
    16. public class RegisterServiceImpl implements RegisterService {
    17.  
    18.     @Autowired
    19.     private UserMapper userMapper;
    20.  
    21.     @Autowired
    22.     private PasswordEncoder passwordEncoder;
    23.  
    24.     @Override
    25.     public Map register(String username, String password, String confirmedPassword) {
    26.         Map map = new HashMap<>();
    27.         if (username == null) {
    28.             map.put("error_message", "用户名不能为空");
    29.             return map;
    30.         }
    31.  
    32.         if (password == null || confirmedPassword == null) {
    33.             map.put("error_message", "密码不能为空");
    34.             return map;
    35.         }
    36.         //删除首尾的空白字符
    37.         username = username.trim();
    38.         if (username.length() == 0) {
    39.             map.put("error_message", "用户名不能为空");
    40.             return map;
    41.         }
    42.  
    43.         if (password.length() == 0 || confirmedPassword.length() == 0) {
    44.             map.put("error_message", "密码不能为空");
    45.             return map;
    46.         }
    47.  
    48.         if (username.length() > 100) {
    49.             map.put("error_message", "用户名长度不能大于100");
    50.             return map;
    51.         }
    52.  
    53.         if (password.length() > 100 || confirmedPassword.length() > 100) {
    54.             map.put("error_message", "密码不能大于100");
    55.             return map;
    56.         }
    57.  
    58.         if (!password.equals(confirmedPassword)) {
    59.             map.put("error_message", "两次输入的密码不一致");
    60.             return map;
    61.         }
    62.  
    63.         //查询用户名是否重复
    64.         QueryWrapper queryWrapper = new QueryWrapper();
    65.         queryWrapper.eq("username", username);
    66.         List users = userMapper.selectList(queryWrapper);
    67.         if (!users.isEmpty()) {
    68.             map.put("error_message", "用户名已存在");
    69.             return map;
    70.         }
    71.  
    72.         // 添加一个新用户
    73.         String encodedPassword = passwordEncoder.encode(password);
    74.         //输入自己的图片地址
    75.         String photo = "******************************";
    76.         User user = new User(null, username, encodedPassword, photo);
    77.         userMapper.insert(user);
    78.  
    79.         map.put("error_message", "success");
    80.         return map;
    81.     }
    82. }

    在这里插入图片描述

     创建controller：在 controller 创建 user 创建 account 新建一个RegisterController

    1. package com.kob.backend.controller.user.account;
    2.  
    3. import com.kob.backend.service.user.account.RegisterService;
    4. import org.springframework.beans.factory.annotation.Autowired;
    5. import org.springframework.web.bind.annotation.PostMapping;
    6. import org.springframework.web.bind.annotation.RequestParam;
    7. import org.springframework.web.bind.annotation.RestController;
    8.  
    9. import java.util.Map;
    10.  
    11. @RestController
    12. public class RegisterController {
    13.  
    14.     @Autowired
    15.     private RegisterService registerService;
    16.  
    17.     @PostMapping("/user/account/register/")
    18.     public Map register(@RequestParam Map map) {
    19.         String username = map.get("username");
    20.         String password = map.get("password");
    21.         String confirmedPassword = map.get("confirmedPassword");
    22.         return registerService.register(username, password, confirmedPassword);
    23.     }
    24. }

    在这里插入图片描述

     调试接口API
    验证用户登陆：
    在 APP.vue 中编写：

    注意：这里的Authorization: “Bearer “有空格，且token为自己的浏览器的token，需要更改token。

    2.  
    3. <script>
    4.  
    5. import NavBar from "@/components/NavBar.vue";
    6. import "bootstrap/dist/css/bootstrap.min.css";
    7. import "bootstrap/dist/js/bootstrap";
    8. import $ from 'jquery'
    9.  
    10. export default {
    11.   components:{
    12.     NavBar
    13.   },
    14.  
    15.   setup() {
    16.     // 测试LoginService
    17.     $.ajax({
    18.       url: "http://127.0.0.1:8080/user/account/token/",
    19.       type: "post",
    20.       data: {
    21.         username: 'syy',
    22.         password: 'psyy',
    23.       },
    24.       success(resp) {
    25.         console.log(resp);
    26.       },
    27.       error(resp) {
    28.         console.log(resp); 
    29.       }
    30.     });
    31.     // 测试InfoService
    32.     $.ajax({
    33.       url: "http://127.0.0.1:8080/user/account/info/",
    34.       type: "get",
    35.       headers: {
    36.         Authorization: "Bearer " + "eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI4MjliMjQzYjg4YmM0NjdjYmRkMDAwMmNiMzYwZDJiMyIsInN1YiI6IjEiLCJpc3MiOiJzZyIsImlhdCI6MTY1OTU3ODUyMiwiZXhwIjoxNjYwNzg4MTIyfQ.s5nd3RgtDKkPBDDm4P87ET8biZk8H79VMII1p_O9OsA",
    37.       },
    38.       success(resp) {
    39.         console.log(resp);
    40.       },
    41.       error(resp) {
    42.         console.log(resp);
    43.       }
    44.     });
    45.     // 测试RegisterService
    46.     $.ajax({
    47.       url: "http://127.0.0.1:8080/user/account/register/",
    48.       type: "post",
    49.       data: {
    50.         username: "hmy",
    51.         password: "phmy",
    52.         confirmedPassword: "phmy",
    53.       },
    54.       success(resp) {
    55.         console.log(resp);
    56.       },
    57.       error(resp) {
    58.         console.log(resp);
    59.       }
    60.     })
    61.   }
    62. }
    63. script>
    64.  
    65.  
    66. <style>
    67. body {
    68.   background-image: url("./assets/images/background.png");
    69.   background-size: cover;
    70. }
    71. style>

    在这里插入图片描述

     测试成功

     四、实现前端的登录，注册界面

    实现两个页面–登陆、注册的前端样式：
    从 bootstrap 上去寻找合适的样式：

    举个例子：

    样式：

    1. <div class="container">
    2.   <div class="row row-cols-2">
    3.     <div class="col">Columndiv>
    4.     <div class="col">Columndiv>
    5.   div>
    6. div>

    在这里插入图片描述

    1. <div class="mb-3">
    2.   <label for="exampleFormControlInput1" class="form-label">Email addresslabel>
    3.   <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    4. div>
    5. <div class="mb-3">
    6.   <label for="exampleFormControlTextarea1" class="form-label">Example textarealabel>
    7.   <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">textarea>
    8. div>
    9.

     提交按钮 

    <button type="button" class="btn btn-primary">Primarybutton>

    创建页面：
    在 views 目录下创建 user ，新建两个文件 UserAccountLoginView.vue 和 UserAccountRegisterView.vue 。

    实现 UserAccountRegisterView.vue 页面：

    1. <template>
    2.     <ContentField>
    3.         注册
    4.     ContentField>
    5. template>
    6.  
    7. <script>
    8. import ContentField from '../../../components/ContentField.vue'
    9.  
    10. export default {
    11.     components: {
    12.         ContentField
    13.     }
    14. }
    15. script>
    16.  
    17. <style scoped>
    18. style>

    在这里插入图片描述

     实现 UserAccountLoginView.vue 页面：

    1. <template>
    2.     <ContentField>
    3.         <div class="row justify-content-md-center">
    4.             <div class="col-3">
    5.                 <form>
    6.                     <div class="mb-3">
    7.                         <label for="username" class="form-label">用户名label>
    8.                         <input v-model="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
    9.                     div>
    10.                     <div class="mb-3">
    11.                         <label for="password" class="form-label">密码label>
    12.                         <input v-model="password" type="password" class="form-control" id="password" placeholder="请输入密码">
    13.                     div>
    14.                     <div class="error-message">{{ error_message }}div>
    15.                     <button type="submit" class="btn btn-primary">提交button>
    16.                 form>
    17.             div>
    18.         div>
    19.     ContentField>
    20. template>
    21.  
    22. <script>
    23. import ContentField from '../../../components/ContentField.vue'
    24.  
    25. export default {
    26.     components: {
    27.         ContentField
    28.     }
    29. }
    30. script>
    31.  
    32. <style scoped>
    33. button {
    34.     width: 100%;
    35. }
    36. div.error-message {
    37.     color: red;
    38. }
    39. style>

    在这里插入图片描述

     在router目录下的index.js中加入路径

    修改 index.js：

    1. import UserAccountLoginView from '../views/user/account/UserAccountLoginView'
    2. import UserAccountRegisterView from '../views/user/account/UserAccountRegisterView'
    3.  
    4. const routes = [
    5.   {
    6.     path: "/user/account/login",
    7.     name: "user_account_login",
    8.     component: UserAccountLoginView,
    9.   },
    10.   {
    11.     path: "/user/account/register",
    12.     name: "user_account_register",
    13.     component: UserAccountRegisterView,
    14.   }
    15.  
    16. ]
    17.  
    18. const router = createRouter({
    19.   history: createWebHistory(),
    20.   routes
    21. })
    22.  
    23. export default router

    在这里插入图片描述

    在store下的user.js存储用户信息

    在 store 下创建 user.js

    1. import $ from 'jquery'
    2.  
    3. export default {
    4.     state: {
    5.         id: "",
    6.         username: "",
    7.         password: "",
    8.         photo: "",
    9.         token: "",
    10.         is_login: false,
    11.     },
    12.     getters: {
    13.     },
    14.     mutations: {
    15.         updateUser(state, user) {
    16.             state.id = user.id;
    17.             state.username = user.username;
    18.             state.photo = user.photo;
    19.             state.is_login = user.is_login;
    20.         },
    21.         updateToken(state, token) {
    22.             state.token = token;
    23.         },
    24.     },
    25.     actions: {
    26.  
    27.     },
    28.     modules: {
    29.     }
    30. }

    在这里插入图片描述

     把user加入到全局module
    在 store 下的 index.js

    1. import { createStore } from 'vuex'
    2. import ModuleUser from './user'
    3.  
    4. export default createStore({
    5.   state: {
    6.   },
    7.   getters: {
    8.   },
    9.   mutations: {
    10.   },
    11.   actions: {
    12.   },
    13.   modules: {
    14.     user: ModuleUser,
    15.   }
    16. })

    在这里插入图片描述

     添加辅助函数login
    在 store 下的 user.js 修改。

    1. import $ from 'jquery'
    2.  
    3. export default {
    4.     state: {
    5.         id: "",
    6.         username: "",
    7.         password: "",
    8.         photo: "",
    9.         token: "",
    10.         is_login: false,
    11.     },
    12.     getters: {
    13.     },
    14.     mutations: {
    15.         updateUser(state, user) {
    16.             state.id = user.id;
    17.             state.username = user.username;
    18.             state.photo = user.photo;
    19.             state.is_login = user.is_login;
    20.         },
    21.         updateToken(state, token) {
    22.             state.token = token;
    23.         },
    24.     },
    25.     actions: {
    26.         login(context, data) {
    27.             $.ajax({
    28.                 url: "http://127.0.0.1:8080/user/account/token/",
    29.                 type: "post",
    30.                 data: {
    31.                   username: data.username,
    32.                   password: data.password,
    33.                 },
    34.                 success(resp) {
    35.                     if (resp.error_message === "success") {
    36.                         context.commit("updateToken", resp.token);
    37.                         data.success(resp);
    38.                     } else {
    39.                         data.error(resp);
    40.                     }
    41.                 },
    42.                 error(resp) {
    43.                   data.error(resp); 
    44.                 }
    45.               });
    46.         },
    47.     },
    48.     modules: {
    49.     }
    50. }

    在这里插入图片描述

     在 UserAccountLoginView.vue 中实现

    在这里插入图片描述

      把内容和变量绑定起来：

    1. <form @submit.prevent="login">
    2.     <div class="mb-3">
    3.         <label for="username" class="form-label">用户名label>
    4.         <input v-model="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
    5.     div>
    6.     <div class="mb-3">
    7.         <label for="password" class="form-label">密码label>
    8.         <input v-model="password" type="password" class="form-control" id="password" placeholder="请输入密码">
    9.     div>
    10.     <div class="error-message">{{ error_message }}div>
    11.     <button type="submit" class="btn btn-primary">提交button>
    12. form>

    在这里插入图片描述

     在登陆界面测试
    输入用户名和密码，获取 token。

    在这里插入图片描述

     用户名和密码输入正确，点击提交跳到主页面
    在 UserAccountLoginView.vue 中实现

    在这里插入图片描述

     登陆成功后获取用户的信息
    在 user.js 中添加辅助函数

    1. import $ from 'jquery'
    2.  
    3. export default {
    4.     state: {
    5.         id: "",
    6.         username: "",
    7.         password: "",
    8.         photo: "",
    9.         token: "",
    10.         is_login: false,
    11.     },
    12.     getters: {
    13.     },
    14.     mutations: {
    15.         updateUser(state, user) {
    16.             state.id = user.id;
    17.             state.username = user.username;
    18.             state.photo = user.photo;
    19.             state.is_login = user.is_login;
    20.         },
    21.         updateToken(state, token) {
    22.             state.token = token;
    23.         },
    24.     },
    25.     actions: {
    26.         login(context, data) {
    27.             $.ajax({
    28.                 url: "http://127.0.0.1:8080/user/account/token/",
    29.                 type: "post",
    30.                 data: {
    31.                   username: data.username,
    32.                   password: data.password,
    33.                 },
    34.                 success(resp) {
    35.                     if (resp.error_message === "success") {
    36.                         context.commit("updateToken", resp.token);
    37.                         data.success(resp);
    38.                     } else {
    39.                         data.error(resp);
    40.                     }
    41.                 },
    42.                 error(resp) {
    43.                   data.error(resp); 
    44.                 }
    45.               });
    46.         },
    47.         getinfo(context, data) {
    48.             $.ajax({
    49.                 url: "http://127.0.0.1:8080/user/account/info/",
    50.                 type: "get",
    51.                 headers: {
    52.                   Authorization: "Bearer " + context.state.token,
    53.                 },
    54.                 //成功就更新用户。
    55.                 success(resp) {
    56.                     if (resp.error_message === "success") {
    57.                         context.commit("updateUser", {
    58.                             ...resp,
    59.                             is_login: true,
    60.                         });
    61.                         data.success(resp);
    62.                     } else {
    63.                         data.error(resp);
    64.                     }
    65.                 },
    66.                 error(resp) {
    67.                     data.error(resp);
    68.                 }
    69.               });
    70.         },
    71.         logout(context) {
    72.             context.commit("logout");
    73.         }
    74.     },
    75.     modules: {
    76.     }
    77. }

    在这里插入图片描述

     修改 UserAccountLoginView.vue

    在这里插入图片描述

     在这里插入图片描述

     把结果返回到右上角个人信息 – 修改导航栏

    修改 NavBar.vue：