0805登录_注册_token_用户信息_退出-网络ajax哀求2-react-仿低代码平台项目

1 JWT

JSON Web Token（JWT）是一种开放尺度（RFC 7519），用于在各方之间安全传输信息。它通过数字签名确保数据的完备性和可信性，常用于身份验证和授权。以下是JWT的详细先容：

---

1.1 JWT结构

JWT由三部分构成，用点（.）分隔：

• Header（头部）
  包罗令牌范例（typ: "JWT"）和签名算法（如alg: HS256）。
  示例：{"alg": "HS256", "typ": "JWT"} → Base64Url编码后形成第一部分。
  
• Payload（载荷）
  存放声明（claims），包括预界说声明（如用户ID、过期时间）和自界说数据。
  常见预界说声明：
  
  
  
  • iss（签发者）、exp（过期时间）、sub（主题）、aud（受众）等。
    示例：{"sub": "123", "name": "Alice", "exp": 1516239022} → Base64Url编码后形成第二部分。
    
  
  
• Signature（签名）
  对前两部分的签名，防止数据篡改。算法由Header指定（如HMAC SHA256）。
  天生方式：HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)。
  

最终JWT情势：xxxxx.yyyyy.zzzzz。

---

1.2 工作流程

• 用户登录：客户端发送凭证（如用户名/暗码）到服务器。
  
• 天生JWT：服务器验证凭证，天生并返回JWT。
  
• 客户端存储：客户端生存JWT（通常存在localStorage或Cookie中）。
  
• 携带令牌哀求：客户端在哀求头中添加Authorization: Bearer <JWT>。
  
• 服务器验证：服务器查抄签名有效性、过期时间等，验证通过后处置惩罚哀求。
  

---

1.3 优点

• 无状态：无需服务器存储会话信息，得当分布式体系。
  
• 跨域支持：实用于API网关、单页应用（SPA）等场景。
  
• 机动性：载荷可自界说扩展，传递非敏感用户信息。
  

---

1.4 缺点

• 不可废止：令牌到期前无法欺压失效，需借助黑名单或短过期时间。
  
• 存储风险：客户端存储不当大概导致XSS攻击盗取令牌。
  
• 信息袒露：载荷仅Base64编码，需克制存放敏感数据。
  

---

1.5 安全实践

• 利用HTTPS：防止令牌在传输中被截获。
  
• 强签名算法：如HMAC SHA256或RSA，克制弱算法（如HS256密钥过短）。
  
• 公道设置过期时间：紧缩令牌有效期，减少泄漏风险。
  
• 敏感数据加密：须要时利用JWE（JSON Web Encryption）加密载荷。
  

---

1.6. 实用场景

• API认证：RESTful API的无状态身份验证。
  
• 单点登录（SSO）：跨多个体系的用户身份共享。
  
• 移动端应用：减少频仍查询数据库的开销。
  

---

1.7 JWT与OAuth2

• JWT常用作OAuth2的Bearer Token，传递用户身份和权限。
  
• OAuth2界说授权流程，JWT是实现令牌的一种方式。
  

---

8. 示例代码（Node.js）

1. const jwt = require('jsonwebtoken');
3. // 生成JWT
4. const token = jwt.sign(
5.   { userId: 123, role: 'admin' },
6.   'your-secret-key',
7.   { expiresIn: '1h' }
8. );
10. // 验证JWT
11. jwt.verify(token, 'your-secret-key', (err, decoded) => {
12.   if (err) throw err;
13.   console.log(decoded); // { userId: 123, role: 'admin', iat: ..., exp: ... }
14. });

复制代码

---

通过明白JWT的结构、流程及安全实践，开发者可以有效利用其在今世Web应用中实现安全、高效的身份验证。
2 用户mock和api

用户mock,user.js代码如下所示：

1. const Mock = require('mockjs')
2. const Random = Mock.Random
5. module.exports = [
6.   {
7.     // 获取用户
8.     url: '/api/user/info',
9.     method: 'get',
10.     response() {
11.       return {
12.         errno: 0,
13.         data: {
14.           username: Random.title(),
15.           nickname: Random.cname(),
16.         },
17.       }
18.     }
19.   },
20.   {
21.     // 注册新用户
22.     url: '/api/user/register',
23.     method: 'post',
24.     response() {
25.       return {
26.         errno: 0
27.       }
28.     }
29.   },
30.   {
31.     // 用户登录
32.     url: '/api/user/login',
33.     method: 'post',
34.     response() {
35.       return {
36.         errno: 0,
37.         data: {
38.           token: Random.word(20)
39.         },
40.       }
41.     }
42.   },
43. ]

复制代码

前端user.ts 用户api接口代码如下所示：

1. import request, { ResDataType } from "../services/request";
3. /**
4. * 获取用户信息
5. * @returns  用户信息
6. */
7. export async function getUserInfoApi(): Promise<ResDataType> {
8.   const url = "/api/user/info";
9.   const data = (await request.get(url)) as ResDataType;
10.   return data;
11. }
13. /**
14. * 注册新用户
15. * @returns  注册是否成功
16. */
17. export async function registerApi(
18.   username: string,
19.   password: string,
20.   nickname?: string
21. ): Promise<ResDataType> {
22.   const url = "/api/user/register";
23.   const body = { username, password, nickname: nickname || username };
24.   const data = (await request.post(url, body)) as ResDataType;
25.   return data;
26. }
28. /**
29. * 用户登录
30. * @returns  token
31. */
32. export async function loginApi(
33.   username: string,
34.   password: string
35. ): Promise<ResDataType> {
36.   const url = "/api/user/login";
37.   const data = (await request.post(url, { username, password })) as ResDataType;
38.   return data;
39. }

复制代码

3 注册

Register.tsx代码如下所示：

1. import { FC } from "react";
2. import { Link, useNavigate } from "react-router-dom";
3. import { Typography, Space, Form, Input, Button, message } from "antd";
4. import { UserAddOutlined } from "@ant-design/icons";
5. import { useRequest } from "ahooks";
7. import { LOGIN_PATHNAME } from "../router";
8. import { registerApi } from "@/api/user";
10. import styles from "./Register.module.scss";
12. const { Title } = Typography;
14. const Register: FC = () => {
15.   const nav = useNavigate();
17.   const { run: handleRegister } = useRequest(
18.     async (values) => {
19.       const { username, password, nickname } = values;
20.       return await registerApi(username, password, nickname);
21.     },
22.     {
23.       manual: true,
24.       onSuccess() {
25.         message.success("注册成功");
26.         // 跳转登录页
27.         nav(LOGIN_PATHNAME);
28.       },
29.     }
30.   );
32.   function onFinish(values: any) {
33.     handleRegister(values);
34.   }
36.   return (
37.     <div className={styles.container}>
38.       <div>
39.         <Space>
40.           <Title level={2}>
41.             <UserAddOutlined />
42.           </Title>
43.           <Title level={2}>注册新用户</Title>
44.         </Space>
45.       </div>
46.       <div>
47.         <Form
48.           labelCol={{ span: 6 }}
49.           wrapperCol={{ span: 16 }}
50.           onFinish={onFinish}
51.         >
52.           <Form.Item
53.             label="用户名"
54.             name="username"
55.             rules={[
56.               { required: true, message: "请输入用户名" },
57.               {
58.                 type: "string",
59.                 min: 5,
60.                 max: 20,
61.                 message: "字符长度再5-20之间",
62.               },
63.               {
64.                 pattern: /^\w+$/,
65.                 message: "只能是字母数字下划线",
66.               },
67.             ]}
68.           >
69.             <Input />
70.           </Form.Item>
71.           <Form.Item
72.             label="密码"
73.             name="password"
74.             rules={[
75.               { required: true, message: "请输入用户名" },
76.               {
77.                 min: 8,
78.                 message: "密码长度最少8位",
79.               },
80.             ]}
81.           >
82.             <Input.Password />
83.           </Form.Item>
84.           <Form.Item
85.             label="确认密码"
86.             name="confirm"
87.             dependencies={["password"]}
88.             rules={[
89.               {
90.                 required: true,
91.                 message: "请输入确认密码",
92.               },
93.               ({ getFieldValue }) => ({
94.                 validator(_, value) {
95.                   if (!value || getFieldValue("password") === value) {
96.                     return Promise.resolve();
97.                   } else {
98.                     return Promise.reject(new Error("两次密码不一致"));
99.                   }
100.                 },
101.               }),
102.             ]}
103.           >
104.             <Input.Password />
105.           </Form.Item>
106.           <Form.Item label="昵称" name="nickname">
107.             <Input />
108.           </Form.Item>
109.           <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
110.             <Space>
111.               <Button type="primary" htmlType="submit">
112.                 注册
113.               </Button>
114.               <Link to={LOGIN_PATHNAME}>已有账户，登录</Link>
115.             </Space>
116.           </Form.Item>
117.         </Form>
118.       </div>
119.     </div>
120.   );
121. };
122. export default Register;

复制代码

执行注册，乐成寻衅登录页，如下图所示：

4 登录

登录页Login.tsx代码如下所示：

1. import { FC, useEffect } from "react";
2. import { Link, useNavigate } from "react-router-dom";
3. import { Typography, Space, Form, Input, Button, Checkbox, message } from "antd";
4. import { UserAddOutlined } from "@ant-design/icons";
5. import { useRequest } from "ahooks";
7. import { MANAGE_INDEX_PATHNAME, REGISTER_PATHNAME } from "../router";
8. import { loginApi } from "@/api/user";
10. import styles from "./Register.module.scss";
12. const { Title } = Typography;
14. const USERNAME_KEY = "username";
15. const PASSWORD_KEY = "password";
17. /**
18. * 浏览器本地存储用户信息
19. * @param username 用户名
20. * @param password 密码
21. */
22. function rememberUser(username: string, password: string) {
23.   localStorage.setItem(USERNAME_KEY, username);
24.   localStorage.setItem(PASSWORD_KEY, password);
25. }
27. /**
28. * 浏览器本地删除用户信息
29. * @param username 用户名
30. * @param password 密码
31. */
32. function deleteUserFromStorage(username: string, password: string) {
33.   localStorage.removeItem(USERNAME_KEY);
34.   localStorage.removeItem(PASSWORD_KEY);
35. }
37. /**
38. * 浏览器本地获取用户信息
39. */
40. function getUserInfoFromStorage() {
41.   return {
42.     username: localStorage.getItem(USERNAME_KEY),
43.     password: localStorage.getItem(PASSWORD_KEY),
44.   };
45. }
47. const Login: FC = () => {
48.   const nav = useNavigate()
50.   // 表单组件初始化
51.   const [form] = Form.useForm();
52.   useEffect(() => {
53.     const { username, password } = getUserInfoFromStorage();
54.     form.setFieldsValue({ username, password });
55.     // eslint-disable-next-line react-hooks/exhaustive-deps
56.   }, []);
58.   const { run: handleLogin } = useRequest(
59.     async (values) => {
60.       const { username, password } = values;
61.       return await loginApi(username, password);
62.     },
63.     {
64.       manual: true,
65.       onSuccess(res) {
66.         message.success("登录成功")
67.         // todo 存储token
68.         // 跳转我的问卷
69.         nav(MANAGE_INDEX_PATHNAME)
70.       },
71.     }
72.   );
74.   function onFinish(values: any) {
76.     const { username, password, remember } = values || {};
77.     if (remember) {
78.       rememberUser(username, password);
79.     } else {
80.       deleteUserFromStorage(username, password);
81.     }
82.     handleLogin({ username, password });
83.   }
85.   return (
86.     <div className={styles.container}>
87.       <div>
88.         <Space>
89.           <Title level={2}>
90.             <UserAddOutlined />
91.           </Title>
92.           <Title level={2}>用户登录</Title>
93.         </Space>
94.       </div>
95.       <div>
96.         <Form
97.           labelCol={{ span: 6 }}
98.           wrapperCol={{ span: 16 }}
99.           onFinish={onFinish}
100.           initialValues={{ remember: true }}
101.           form={form}
102.         >
103.           <Form.Item
104.             label="用户名"
105.             name="username"
106.             rules={[
107.               { required: true, message: "请输入用户名" },
108.               {
109.                 type: "string",
110.                 min: 5,
111.                 max: 20,
112.                 message: "字符长度再5-20之间",
113.               },
114.               {
115.                 pattern: /^\w+$/,
116.                 message: "只能是字母数字下划线",
117.               },
118.             ]}
119.           >
120.             <Input />
121.           </Form.Item>
122.           <Form.Item
123.             label="密码"
124.             name="password"
125.             rules={[
126.               { required: true, message: "请输入用户名" },
127.               {
128.                 min: 8,
129.                 message: "密码长度最少8位",
130.               },
131.             ]}
132.           >
133.             <Input.Password />
134.           </Form.Item>
135.           <Form.Item
136.             wrapperCol={{ offset: 6, span: 16 }}
137.             name="remember"
138.             valuePropName="checked"
139.           >
140.             <Checkbox>记住我</Checkbox>
141.           </Form.Item>
142.           <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
143.             <Space>
144.               <Button type="primary" htmlType="submit">
145.                 登录
146.               </Button>
147.               <Link to={REGISTER_PATHNAME}>注册新用户</Link>
148.             </Space>
149.           </Form.Item>
150.         </Form>
151.       </div>
152.     </div>
153.   );
154. };
155. export default Login;

复制代码

登录乐成后跳转我的问卷也，如下图所示：

5 token存储

用户登录乐成后，必要存储token，userToken.ts代码如下所示

1. /**
2. * @description localStorage管理用户token
3. * @author gaogzhen
4. */
6. const KEY = "USER-TOKEN"
8. /**
9. * 设置token
10. * @param token
11. */
12. export function setToken(token:string) {
13.   localStorage.setItem(KEY, token)  
14. }
16. /**
17. * 获取token
18. * @returns token
19. */
20. export function getToken() {
21.   return localStorage.getItem(KEY) || ''
22. }
25. /**
26. * 删除token
27. */
28. export function removeToken() {
29.   localStorage.removeItem(KEY)
30. }

复制代码

登录页登录乐成后，执行存储token，Login.tsx代码如下：

1.   const { run: handleLogin } = useRequest(
2.     async (values) => {
3.       const { username, password } = values;
4.       return await loginApi(username, password);
5.     },
6.     {
7.       manual: true,
8.       onSuccess(res) {
9.         message.success("登录成功");
10.         // 存储token
11.         const { token = "" } = res;
12.         setToken(token);
13.         // 跳转我的问卷
14.         nav(MANAGE_INDEX_PATHNAME);
15.       },
16.     }
17.   );

复制代码

localStorage存储如下图哦所示：

6 哀求拦截器设置token

登录乐成后，用户每次哀求必要携带token，用户身份验证、权限验证等。这里通过哀求拦截器实现，request.ts代码如下所示：

1. import axios from "axios";
2. import { message } from "antd";
3. import { AUTHORIZATION } from "@/constant";
4. import { getToken } from "@/utils/userToken";
6. const request = axios.create({
7.   timeout: 5000,
8. });
10. // request拦截：每次请求携带token
11. request.interceptors.request.use((config) => {
12.   // todo token 校验
13.   config.headers[AUTHORIZATION] = `Bearer ${getToken()}`;
14.   return config;
15. });
17. // response 拦截：统一处理errno和msg
18. request.interceptors.response.use((res) => {
19.   const resData = (res.data || {}) as ResType;
20.   const { errno, data, msg } = resData;
22.   if (errno !== 0) {
23.     // 错误提示
24.     if (msg) {
25.       message.error(msg);
26.     }
27.     throw new Error(msg);
28.   }
30.   return data as any;
31. });
32. export default request;
34. export type ResDataType = {
35.   [key: string]: any;
36. };
38. export type ResType = {
39.   errno: number;
40.   data?: ResDataType;
41.   msg?: string;
42. };

复制代码

结果如下图所示：

6 获取用户信息

用户登录之后，用户信息很多地方必要利用，在学习状态管理之后再处置惩罚，这里我们暂时在用户信息组件处置惩罚。
用户信息UserInfo.tsx代码如下所示：

1. import { FC } from "react";
2. import { Link } from "react-router-dom";
3. import { LOGIN_PATHNAME } from "../router/index";
4. import { useRequest } from "ahooks";
5. import { getUserInfoApi } from "@/api/user";
6. import { UserOutlined } from "@ant-design/icons";
7. import { Button } from "antd";
9. const UserInfo: FC = () => {
10.   const { data } = useRequest(getUserInfoApi);
11.   const { username, nickname } = data || {};
13.   const User = (
14.     <>
15.       <span style={{ color: "#e8e8e8" }}>
16.         <UserOutlined />
17.         {nickname}
18.       </span>
19.       <Button type="link">退出</Button>
20.     </>
21.   );
23.   const Login = <Link to={LOGIN_PATHNAME}>登录</Link>;
24.   return <>{username ? User : Login}</>;
25. };
26. export default UserInfo;

复制代码

结果如下图所示：

7 退出登录

UserInfo.tsx退出功能代码如下所示：

1. import { FC } from "react";
2. import { Link, useNavigate } from "react-router-dom";
3. import { useRequest } from "ahooks";
4. import { Button } from "antd";
5. import { UserOutlined } from "@ant-design/icons";
7. import { LOGIN_PATHNAME } from "../router/index";
8. import { getUserInfoApi } from "@/api/user";
9. import { removeToken } from "@/utils/userToken";
11. const UserInfo: FC = () => {
13.   const nav = useNavigate()
15.   const { data } = useRequest(getUserInfoApi);
16.   const { username, nickname } = data || {};
18.   function logout() {
19.     removeToken()
20.     // 跳转登录页
21.     nav(LOGIN_PATHNAME)
22.   }
24.   const User = (
25.     <>
26.       <span style={{ color: "#e8e8e8" }}>
27.         <UserOutlined />
28.         {nickname}
29.       </span>
30.       <Button type="link" onClick={logout}>退出</Button>
31.     </>
32.   );
34.   const Login = <Link to={LOGIN_PATHNAME}>登录</Link>;
35.   return <>{username ? User : Login}</>;
36. };
37. export default UserInfo;

复制代码

注：

• 执行退出，但是右上角还是体现登录状态，背面处置惩罚
  

结语

   ❓QQ:806797785
  ⭐️堆栈地点：https://gitee.com/gaogzhen
  ⭐️堆栈地点：https://github.com/gaogzhen
  [1]ahook官网[CP/OL].
[2]mock文档[CP/OL].
[3]Ant Design官网[CP/OL].

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

继续阅读请点击广告