Proyecto front-end de comercio electrónico: funciones completas de registro e inicio de sesión, protección de enrutamiento
Directorio de artículos
1. Complete la parte de registro
1. Obtener código de verificación
Primero, cree una página estática para iniciar sesión y registrarse, y luego implemente la parte del código de verificación: ingrese su número de teléfono móvil, envíe una solicitud para obtener un código de verificación y luego muéstrelo directamente en el cuadro de texto.
Primero, escriba la interfaz:
// 获取验证码
export const reqGetCode = (phone) => {
return requests({
url: `/user/passport/sendCode/${
phone}`,
method: "get",
});
};
A continuación, está el vuex con el que estamos familiarizados:
import {
reqGetCode } from "@/api";
// 登录与注册模块
const state = {
code: "",
};
const mutations = {
GETCODE(state, code) {
state.code = code;
},
};
const actions = {
// 获取验证码
async getCode({
commit }, phone) {
let result = await reqGetCode(phone);
// console.log("获取验证码" + result.data);
if (result.code == 200) {
commit("GETCODE", result.data);
return "ok";
} else {
return Promise.reject(new Error(fail));
}
},
};
const getters = {
};
export default {
state,
mutations,
actions,
getters,
};
Finalmente, muestre el código de verificación solicitado en el cuadro del código de verificación:
2. Completar el registro de usuario
Esta parte también es relativamente sencilla: consiste principalmente en enviar una solicitud con el número de teléfono móvil, el código de verificación y la contraseña y agregarla a la base de datos.
Enlaces de interfaz de escritura familiares:
// 注册
export const reqUserRegister = (phone, password, code) => {
return requests({
url: "/user/passport/register",
data: {
phone,
password,
code,
},
method: "post",
});
};
Vayamos al enlace de vuex con el que estamos familiarizados.
const actions = {
// 用户注册
async userRegister({
commit }, {
phone, password, code }) {
try {
let result = await reqUserRegister(phone, password, code);
// console.log(result);
if (result.code == 200) {
return "注册成功";
}
if (result.code == 223) {
return "该用户已注册！";
}
} catch (err) {
alert("请求失败", err.message);
}
},
};
cons
Finalmente, haga clic en el botón Registrarse para enviar la solicitud:
export default {
name: "Register",
data() {
return {
// 收集表单数据
// 手机号
phone: "",
// 验证码
code: "",
// 密码
password: "",
// 确认密码
password1: "",
// 是否同意协议
agree: true,
};
},
methods: {
.......
async userRegister() {
try {
//来个逻辑短路
// 若phone、code、password都存在且password=password1,agree=true注册才会成功
const {
phone, password, password1, agree, code } = this;
if (
phone &&
code &&
password &&
password1 &&
password == password1 &&
agree == true
) {
let result = await this.$store.dispatch("userRegister", {
phone,
code,
password,
});
alert(result);
if (result == "注册成功") {
this.$router.push("/login");
}
}
} catch (err) {
alert("注册失败！", err);
}
},
},
};
2. Iniciar sesión
Primero click.preventevite la operación de envío de formulario predeterminada para evitar saltos.
1. Haga clic en Iniciar sesión para enviar la verificación de la solicitud.
Escribir interfaz de inicio de sesión:
// 登录
export const reqLogin = (data) => {
return requests({
url: "/user/passport/login",
data,
method: "post",
});
};
Escribe vuex:
async userLogin({
commit }, data) {
let result = await reqLogin(data);
console.log("登录信息" + result);
},
Solicitud de despacho y salto de ruta:
// 用户登录
async userLogin() {
try {
// 登录成功
const {
phone, password } = this;
phone &&
password &&
(await this.$store.dispatch("userLogin", {
phone, password }));
// 跳转到路由首页
this.$router.push("/home");
} catch (error) {
alert("登录失败" + error.message);
}
},
Después de solicitar datos, el servidor devolverá un campo denominado, que tokense utiliza para identificar de forma única al usuario.
2. Guarde el token emitido
Cuando hacemos clic para iniciar sesión, los datos devueltos son así. Hay un campo en él token, que es el identificador único del usuario. En el futuro, lo necesitaremos cuando solicitemos cosas relacionadas con el usuario token.
Dado que vuex es un almacenamiento de datos no persistente, desaparecerá tan pronto como se actualice, por lo que debemos tokenalmacenarlo en el almacenamiento local.
// 登录与注册模块
const state = {
......
token: localStorage.getItem("TOKEN"),
......
};
const mutations = {
......
USERLOGIN(state, token) {
state.token = token;
},
};
const actions = {
.......
// 登录
async userLogin({
commit }, data) {
let result = await reqLogin(data);
// console.log("登录信息" + result);
// 服务器下发的token是用户的唯一标识
// 经常通过token找服务器要用户信息进行展示
if (result.code == 200) {
commit("USERLOGIN", result.data.token);
// 持久化存储token
localStorage.setItem("TOKEN", result.data.token);
return "ok";
} else {
return Promise.reject(new Error("fail"));
}
},
Cada solicitud posterior debe estar relacionada con el token, por lo que debemos escribir el token en el encabezado de la solicitud.
3. Solicite datos de usuario con token y muéstrelos.
Esquina superior izquierda cuando no estás conectado:
Después de iniciar sesión correctamente:
Aquí surge una pregunta, es decir, dónde debe escribirse el envío de esta solicitud.
Si está escrito en la página de inicio, la solicitud se enviará en la página de inicio (en realidad, esto es incorrecto; si la actualiza en otra página, perderá el nombre de usuario).
1. Si solo escribe en la página de inicio, salte a otras páginas y haga clic para actualizar los datos del usuario en vuex y los datos del usuario en vuex desaparecerán, pero si todos los componentes que usan el nombre de usuario deben enviarse, Será demasiado problemático.
2. Si está escrito en la aplicación, la solicitud de envío es antes de iniciar sesión. Si no hay token, los datos no se pueden solicitar. Solo actualizando la página después de iniciar sesión (ya hay un token) se pueden solicitar los datos (el La aplicación debe ser la primera en montarse cuando se actualiza la página).
La solución es utilizar guardias de enrutamiento para emitir juicios y enviar solicitudes sin datos del usuario. (Este problema se solucionará a continuación, pero primero se distribuirá en casa)
Aquí primero distribuimos la distribución a casa. Primero escriba la interfaz para solicitar datos de usuario:
// 获取用户信息(需要带着用户的token向服务器要用户信息，写在请求头里)
export const reqGetUserMsg = () => {
return requests({
url: "/user/passport/auth/getUserInfo",
method: "get",
});
};
Vuex guarda datos en el almacén:
// 获取用户信息
async getUserMsg({
commit }) {
let result = await reqGetUserMsg();
console.log("用户信息" + result.data);
if (result.code == 200) {
// 用户已经登录成功且获取到token
commit("GETUSERMSG", result.data);
}
},
anexo
computed: {
userName() {
return this.$store.state.user.userMsg.name;
},
},
4. Cerrar sesión
En el componente Encabezado, lea los datos del usuario de vuex y obtenga el nombre de usuario
Cerrar sesión en la interfaz de inicio de sesión:
// 退出登录
export const reqLogout = () => {
return requests({
url: "/user/passport/logout",
method: "get",
});
};
vuex borra la información del usuario relacionada:
const mutations = {
CLEAR(state) {
// 把仓库中相关用户信息和本地存储清空
state.token = "";
state.userInfo = {
};
localStorage.removeItem("TOKEN");
},
};
const actions = {
// 退出登录
async UserLogout({
commit }) {
let result = await reqLogout();
if (result.code == 200) {
commit("CLEAR");
return "ok";
} else {
return Promise.reject(new Error("fail"));
}
},
};
Volver a la página de inicio después de salir:
// 退出登录
async logout() {
try {
// 需要发请求通知服务器退出登录（清除一些数据）
// 清除项目当中的数据（userInfo、token）
// 退出成功
await this.$store.dispatch("UserLogout");
// 回到首页
this.$router.push("/home");
} catch (error) {
alert("退出登录失败" + error.message);
}
},
5. Guardia de ruta
Todavía quedan algunos problemas sin resolver arriba.
- No debería poder regresar a la página de inicio de sesión después de iniciar sesión. La lógica normal debería ser que solo pueda ingresar a la página de inicio de sesión cuando no haya iniciado sesión o después de cerrar sesión.
- Dado que la solicitud anterior solo se envía a la página de inicio para obtener información del usuario, cuando vamos a otras páginas, la información del usuario desaparece. Podemos enviar solicitudes a cada página, pero esto es demasiado problemático.
Los dos problemas anteriores se pueden resolver utilizando guardias de ruta. Haga clic para revisar los guardias de enrutamiento
src/router/index.js
// 全局守卫——前置守卫
router.beforeEach(async (to, from, next) => {
// 用户登录了才会有token
let token = store.state.user.token;
// 用户是否登录
if (token) {
// 登录了就不能再回到登录页,停留在首页
if ((to.path = "/login")) {
next("/home");
}
// 登录了去其他的页面
else {
// 如果有用户数据，放行
if (store.state.user.userMsg.name) {
next();
}
// 如果没有用户数据，先请求成功再放行
else {
try {
// 这个请求在挂载之前，所以刷新也会先请求
await store.dispatch("getUserMsg");
next();
} catch (err) {
console.log("请求用户数据失败！", err);
// 这里还有一种情况，token过期请求不到
// 那么就要清空token，重新登录
await store.dispatch("userLogout");
// localStorage.removeItem("TOKEN");
next("/login");
}
}
}
}
// 如果没有登录
else {
//没登录不能去的路由地址
let pages = ["/trade", "/pay", "/paysuccess", "/center/myorder"];
if (pages.includes(to.path)) {
// 如果没登陆往这几个页面跳，就回到登录页，并传想去的页面的地址
// 这样能提升用户体验，登录完成后直接跳到刚才的页面
next(`/login?redirect=${
to.path}`);
} else {
next();
}
}
});
En este punto, las notas sobre las funciones de inicio de sesión y registro están casi organizadas. Releí el código que escribí antes y descubrí que todavía hay muchas áreas por mejorar, así que hice algunos cambios menores. De hecho, hubo muchos detalles que fueron No lo consideré cuando los escribí antes. Todavía necesito pensar más. Solo mire hacia atrás.