后端技能选型 sa-token校验学习 下 结合项目学习 前后端登录 ...

目录
后端设置
Controller 层
Service 层
后端返回 Token 给前端
1. 用户提交登录哀求
2. 后端验证用户身份
3. 返回 Token
4. 前端保存 Token
前端存储
1. 前端向后端发起哀求
2. 前端存储一下 Token
3.管理用户认证的 token 的 工具
4. 在 Service 层进行设置 HTTP 哀求工具

---

后端设置

Controller 层

1.    /**
2.      * 用户登录
3.      *
4.      * @param login 登录参数
5.      * @return {@link String} Token
6.      */
7.     @ApiOperation(value = "用户登录")
8.     @PostMapping("/login")
9.     public Result<String> login(@Validated @RequestBody LoginReq login) {
10.         return Result.success(loginService.login(login));
11.     }

复制代码

Service 层

起首用 userMapper 查询数据库中的数据是否存在

1.           User user = userMapper.selectOne(new LambdaQueryWrapper<User>()
2.                     .select(User::getId)
3.                     .eq(User::getUsername, login.getUsername())
4.                     .eq(User::getPassword, SecurityUtils.sha256Encrypt(login.getPassword())));

复制代码

再标记当前登录账号 id

1. // 标记当前会话登录的账号id
2. StpUtil.login(user.getId());

复制代码

返回 Token 数值

1. return StpUtil.getTokenValue();

复制代码

全部代码

1.    public String login(LoginReq login) {        try {            User user = userMapper.selectOne(new LambdaQueryWrapper<User>()
2.                     .select(User::getId)
3.                     .eq(User::getUsername, login.getUsername())
4.                     .eq(User::getPassword, SecurityUtils.sha256Encrypt(login.getPassword())));            Assert.notNull(user, "用户不存在或暗码错误");            // 校验指定账号是否已被封禁，如果被封禁则抛出异常 `DisableServiceException`            StpUtil.checkDisable(user.getId());            // 通过校验后，再进行登录            // 标记当前会话登录的账号id            StpUtil.login(user.getId());            // 拿到当前登录账号的Id            Integer userId = StpUtil.getLoginIdAsInt();            System.out.println("当前登录账号的Id: "+userId);            String token = StpUtil.getTokenValue();  // 获取当火线程的 token            System.out.println("Token: " + token);  // 打印出 token 以便调试//            //获取当前是否登录//            StpUtil.isLogin();            System.out.println("登录状态: "+StpUtil.isLogin());//            //检验当前会话是否已经登录//            StpUtil.checkLogin();            return StpUtil.getTokenValue();        } catch (IllegalArgumentException e) {            e.printStackTrace();            throw e;        }    }

复制代码

后端返回 Token 给前端

后端登录成功后，通常会将一个 Token 返回给前端，这个 Token 通常是一个 JWT（JSON Web Token），它包罗了用户身份和一些其他的认证信息，而且可以用来进行后续的 API 哀求验证。后端返回 Token 的过程通常是如许的：
1. 用户提交登录哀求

用户输入用户名和暗码后，前端会将哀求发送到后端，后端会进行认证。
2. 后端验证用户身份

后端会根据用户名和暗码进行身份验证，如果验证成功，则天生一个 Token，通常是 JWT 格式。
3. 返回 Token

后端将 Token 返回给前端，前端可以在后续的哀求中将这个 Token 放在哀求头中（通常是 Authorization: Bearer token）来进行身份认证。
4. 前端保存 Token

前端通常会把 Token 保存在浏览器的 localStorage 或 sessionStorage 中，或者通过 HTTP-only 的 cookie 来存储，以便在之后的哀求中携带。
前端存储

把 表单里面的数据 作为参数
1. 前端向后端发起哀求

异步哀求

1.   login(loginForm.value).then(({ data }) => {
2.     if (data.flag) {
3.       setToken(data.data);
4.       // user.GetUserInfo();
5.       window.$message?.success("登录成功");
6.       loginForm.value = {
7.         username: "",
8.         password: "",
9.       };
10.       app.setLoginFlag(false);
11.     }
12.     loading.value = false;
13.   });

复制代码

2. 前端存储一下 Token

1.     setToken(data.data);

复制代码

3.管理用户认证的 token 的 工具

写一个管理用户认证的 token 的 TypeScript 代码

1. import Cookies from "js-cookie";
3. const TokenKey: string = "Token";
5. // 我网站的域名是www.ttkwsd.top，去前面的www，改成自己的域名
6. const domain: string = ".gczdy.cn";
8. // token前缀
9. export let token_prefix = "Bearer ";
11. export function getToken() {
12.   return Cookies.get(TokenKey);
13. }
15. // 本地运行记得删除domain
16. export function setToken(token: string) {
17.   // 项目线上部署可以取消注释
18.   // return Cookies.set(TokenKey, token, { domain: domain });
19.   return Cookies.set(TokenKey, token);
20. }
22. export function removeToken() {
23.   // 项目线上部署可以取消注释
24.   // return Cookies.remove(TokenKey, { domain: domain });
25.   return Cookies.remove(TokenKey);
26. }

复制代码

这段代码是用来管理用户认证的 token（令牌）的，通常用于前端应用中的身份验证部分。它使用了 js-cookie 库来处理 cookies 的操纵。下面逐行表明：
1. import Cookies from "js-cookie";

• 导入 js-cookie 库，它是一个简化操纵 cookies 的 JavaScript 库。通过它可以方便地存储、获取和删除 cookies。
  

2. const TokenKey: string = "Token";

• 定义了一个常量 TokenKey，值为 "Token"，作为存储 token 的 cookie 键名。这个键用于在 cookies 中存取用户的 token。
  

3. const domain: string = ".gczdy.cn";

• 定义了一个 domain 常量，表示 cookies 实用的域名。.gczdy.cn 是设置 cookies 时的域名，意味着该 cookie 会对该域及其子域名（比方 www.gczdy.cn 或 app.gczdy.cn）有用。
  
• 代码中也有注释提到：如果是当地开发情况，可以删除该行。
  

4. export let token_prefix = "Bearer ";

• 定义了一个 token_prefix 常量，表示 token 的前缀。通常在 HTTP 哀求中，token 会与前缀（如 "Bearer "）一起发送，以标明它是一个授权令牌。
  
• 比方，使用 token 时会变成 Bearer <token_value>。
  

5. export function getToken() { return Cookies.get(TokenKey); }

• 定义了一个 getToken 函数，用来获取存储在 cookies 中的 token。它通过 Cookies.get() 方法使用 TokenKey 获取相应的 token 值。
  

6. export function setToken(token: string) { return Cookies.set(TokenKey, token); }

• 定义了一个 setToken 函数，用来将 token 存储到 cookies 中。它使用 Cookies.set() 方法，将传入的 token 存储到 cookies 中，键名是 TokenKey。
  
• 如果是线上情况，可以启用注释中的 domain 设置，将 cookie 限定在特定域名下。
  

7. export function removeToken() { return Cookies.remove(TokenKey); }

• 定义了一个 removeToken 函数，用来删除存储在 cookies 中的 token。它通过 Cookies.remove() 方法，删除了键名为 TokenKey 的 cookie。
  

总结：

• 这段代码主要用来操纵用户的认证信息（token）。它提供了三个函数：
  

• 
  
  
  
  • getToken() 用来获取存储的 token；
    
  • setToken(token) 用来将 token 存储到 cookies 中；
    
  • removeToken() 用来删除存储的 token。
    
  
  

• 这些操纵通常用于前端应用中的登录认证流程。存储 token 可以用于后续的 API 哀求（比方，通过在哀求头中添加 Authorization: Bearer <token> 来验证用户身份）。
  

4. 在 Service 层进行设置 HTTP 哀求工具

1. import { getServiceBaseURL } from "@/utils/service";
2. import { getToken, token_prefix } from "@/utils/token";
3. import { createRequest } from "./request";
4. const isHttpProxy =
5.         import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === "Y";
6. const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
8. export const request = createRequest<App.Service.Response>(
9.         {
10.                 baseURL,
11.         },
12.         {
13.                 async onRequest(config) {
14.                         // 请求带token
15.                         if (getToken()) {
16.                                 // Authorization -> satoken
17.                                 config.headers["Authorization"] = token_prefix + getToken();
18.                         }
20.                         return config;
21.                 },
22.                 isBackendSuccess(response) {
23.                         return response.data.code === 200;
24.                 },
25.                 async onBackendFail(_response) {
27.                 },
28.                 transformBackendResponse(response) {
29.                         return response.data.data;
30.                 },
31.                 onError(error) {
32.                         let message = error.message;
34.                         if (error.code === "BACKEND_ERROR_CODE") {
35.                                 message = error.response?.data?.msg || message;
36.                         }
38.                         window.$message?.error(message);
39.                 },
40.         }
41. );

复制代码

之后在发哀求的时候 前端会把这个 Token 放到 Header 里面
带给后端
这段代码主要用于创建一个 HTTP 哀求工具，通常用于前端应用中处理与后端的通讯。它使用了封装的 createRequest 函数来天生哀求实例，并设置了多个钩子函数来处理哀求、响应和错误等。下面是逐行表明：
1. import { getServiceBaseURL } from "@/utils/service";

• 从 @/utils/service 模块导入 getServiceBaseURL 函数。这个函数通常用于根据情况设置（如开发、生产）来获取服务的基本 URL。
  

2. import { getToken, token_prefix } from "@/utils/token";

• 从 @/utils/token 模块导入 getToken 和 token_prefix。getToken 用来获取存储在 cookies 中的用户 token，token_prefix 是 token 的前缀（通常为 "Bearer "）。
  

3. import { createRequest } from "./request";

• 从当地的 request 模块导入 createRequest 函数。createRequest 用于创建一个 HTTP 哀求实例，并可以设置哀求的一些默认行为。
  

4. const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === "Y";

• 定义了一个 isHttpProxy 变量，判断当前是否在开发情况（import.meta.env.DEV）以及是否启用了 HTTP 代理（import.meta.env.VITE_HTTP_PROXY）。这通常用于调试或跨域哀求代理。
  

5. const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);

• 调用 getServiceBaseURL 函数，转达情况设置（import.meta.env）和 isHttpProxy 参数，获取服务的根本 URL。baseURL 将作为哀求的根当地址。
  

6. export const request = createRequest<App.Service.Response>( { baseURL }, { ... });

• 使用 createRequest 函数创建一个哀求实例，传入设置项。其中 baseURL 是哀求的根本 URL，后面的对象是设置该哀求的详细行为。
  
• App.Service.Response 表示哀求响应的范例，确保哀求和响应数据的范例安全。
  

7. async onRequest(config) { ... }

• onRequest 是哀求钩子函数，在每个哀求发送之前实行。它可以用来修改哀求的设置。
  
• 这里查抄 getToken() 是否存在，如果存在则在哀求头中添加 Authorization 字段，值为 Bearer <token>，用于身份验证。
  

8. isBackendSuccess(response) { return response.data.code === 200; }

• isBackendSuccess 是用来判断后端响应是否表示哀求成功。根据响应中的 data.code 是否等于 200 来判断。
  

9. async onBackendFail(_response) { ... }

• onBackendFail 是当后端返回失败时触发的回调函数。在这个示例中，没有任何详细的逻辑实现，可能是保留的空函数，或者在后端失败时要进行的其他处理。
  

10. transformBackendResponse(response) { return response.data.data; }

• transformBackendResponse 用于处理从后端响应的数据。默认从响应中提取 data.data 部分，作为最终返回的数据。如许可以同一处理不同后端返回的数据格式。
  

11. onError(error) { ... }

• onError 是哀求发生错误时的回调函数。在这里，错误消息会根据 error.code 来定制，如果错误范例是 BACKEND_ERROR_CODE，则从响应中提取错误信息。末了，使用 window.$message?.error(message) 显示错误信息。
  

总结：

• 这段代码定义了一个 request 实例，用于实行 API 哀求。它封装了哀求设置、响应处理、错误处理等多个方面的逻辑。
  
• onRequest 钩子在哀求发送前自动添加 token，用于授权。
  
• isBackendSuccess 函数用来判断后端是否成功处理了哀求。
  
• transformBackendResponse 用于提取后端响应数据的有用部分。
  
• onError 函数负责处理错误，并向用户显示相关的错误消息。
  

通过依赖 和 设置 生效

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。