A autenticação de registro e login é muito importante para um site, não apenas pode proteger suas informações pessoais, mas também facilitar operações subseqüentes.
01 Prefácio
Hoje vou falar com você sobre o nosso processo de login e registro. Sabemos que existem muitas situações para efetuar login. Por exemplo, você pode fazer login usando a senha da sua conta, pode fazer login usando um código de verificação e também pode fazer login usando uma conta de terceiros. Na verdade, o princípio é semelhante, basta verificar se sua conta é razoável Se as informações de login são válidas.
Mas este artigo é para você contar o mistério de usar um processo de login simples. De um modo geral, após o login bem-sucedido, o servidor retornará um token. Não pense que essa é uma string irracional. No começo, pensei nisso. De fato, as informações de nossa conta são salvas no token; somente após a operação de criptografia, podemos obtê-las após a descriptografia.
02 Preparação
Você pode não saber o que é o jwt no início. Simplificando, esta é uma versão criptografada das informações do usuário. Você pode criptografar sua conta ou descriptografá-la. Entenda isso, podemos usá-lo para fazer uma coisinha, estamos usando uma arquitetura simples como vue + jwt + node + mysql, podemos simplesmente escrever a operação de login na página vue, use o node para escrever um login A interface é suficiente.
Para cuidar da maioria dos amiguinhos, vou elaborar um pouco mais sobre o processo. Inicialmente, devemos instalar os dois plugins mysql e jsonwebtoken.Para maior comodidade, eu também instalei o express, o objetivo é facilitar a operação ao usar o roteamento.
Acesse o banco de dados
api.js文件
const mysql = require('mysql');
const sqlMap = require('./sqlMap');
//创建链接对象
const pool = mysql.createPool({
host: 'xx.xx.xxx.xxx',
user: 'root',
port: 3306,
password: 'xxxxxx',
database: 'xxxxxx',
multipleStatements: true // 多语句查询
})
//写一个登录接口
module.exports = {
login(req, res, next) {
var username = req.query.username;
var password = req.query.password;
pool.getConnection((err, connection) => {
var sql = sqlMap.login; //这里有一个sqlMap对象，用来写sql语句
connection.query(sql,[username,password] ,(err, result) => {
res.json(result);
connection.release();
})
})
},
//接下来可以写更多的接口
}
Há também uma rota para escrever uma interface, ou seja, você se conectará ao banco de dados e consultará o banco de dados quando solicitar isso
router.js文件
const express = require('express');
const router = express.Router();
const api = require('./api'); //这里引入上面的文件
router.get('/login', (req, res, next) => {
api.login(req, res, next);
});
//最后记得导出
module.exports = router;
Acima, ainda uso um objeto de um sqlMap, escrevemos um separadamente, apenas para conveniência futura, e o acoplamento é mais baixo e fácil de expandir.
var sqlMap = {
login: 'select * from teacher where teacherName = ? and `password` = ?;',
}
//最后也记得要导出
module.exports = sqlMap;
Dessa forma, podemos usar esse objeto quando o introduzirmos no arquivo, o que também pode escrever muitas consultas de instrução SQL.
Dito isso, precisamos iniciar o serviço, e simplesmente iniciar um serviço que possa chamar todas as interfaces que escrevemos, este é um arquivo principal, que chamamos de arquivo index.js
const routerApi = require('./router');
const path = require('path');
const bodyParser = require('body-parser'); // post 数据解析
const express = require('express');
const app = express();
app.use(bodyParser.json());
// 后端api路由
app.use('/api', routerApi);
// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');
Dessa forma, ouviremos a porta 3000 após o nó index.js. Nesse ponto, nosso serviço é iniciado e a parte do banco de dados será aberta.
Primeira página
Como explicação aqui, não precisamos escrever algumas páginas bonitas. Existem duas caixas de entrada. O Vue possui uma função de ligação de dados bidirecional, para que possamos obter facilmente o conteúdo da caixa de entrada e usar a senha da conta para passá-la. Faça uma consulta sql ao back-end. Que tal, é particularmente simples?
form: {
username: "",
password: "",
}
Por exemplo, em dados, armazenamos os dados da caixa de entrada dessa maneira: se você pode realizar algumas operações, como verificação, use a biblioteca de componentes elementui, encontrará um novo mundo. Não começará aqui.
Em seguida, escreva um método de login nos métodos para interagir com os dados de back-end.Aqui também é uma operação muito simples.
//在script标签下面引入：
//const jwt = require("jsonwebtoken");
//const secret = "your string"; //自己的密钥
login() {
this.$axios
.get("/api/login", {//请求的接口
params: { username: form.username, password: form.password }//传递参数
})
.then(res => {
if (res.data.length > 0) {//假如返回有数据就使用token加密一下
const token = jwt.sign(
{
name: res.data[0]//这里就是数据库返回的用户相关的信息
},
secret,//这是一个密钥，可以使用你喜欢的字符串
{
expiresIn: 86400 //秒，到期时间，一天
}
);
this.$store.commit("SET_TOKEN", token);//写入token
this.$router.replace("home");//跳转到主页
} else {
this.$message.error("登录失败");
}
});
}
Você pode ver que eu escrevi o token no vuex e o coloquei em sessionStorage, que é para gerenciá-lo em um estado global.Por exemplo, é muito prático exibir seu nome na página inicial e controlar as permissões no futuro. Você pode usar isso. $ Store.state.user para obter informações do usuário no futuro.
Se você precisar usar dados do usuário em que possa analisar diretamente o token, escrevi aqui um campo extra para armazenar informações de nome e identidade do usuário por conveniência. Aqui para analisar os dados, usamos apenas o método de função que acompanha o jwt.O token é o token que você armazenou no global e o segredo é o que você usou para criptografia, para que possa ser analisado sem problemas.
//这里也要引入
//const jwt = require("jsonwebtoken");
//const secret = "your string"; //自己的密钥
jwt.verify(token, secret, function(err, decoded) {
if (!err) {
User.id = decoded.name.teacherId;
User.username = decoded.name.teacherName;
}
});
04 Resumo
Neste artigo, eu falei apenas sobre como usar o jwt para executar uma operação simples de verificação de login, adequada para alguns estudantes brancos experimentarem, afinal, esse também é um dos pacotes npm mais usados. De fato, muitos tutoriais na Internet dizem como usar o jwt para verificação.Talvez você ache que um ponto de conhecimento tão simples precisa ser tão complicado? Na verdade, você não entende a dor no coração de Xiaobai. No começo, eu não sabia como usá-la. Também vi muitos detalhes sobre a realização e finalmente percebi.
De fato, meu artigo deve ser direcionado a alguns alunos com bases fracas.Eu entendo que eles querem fazer uma função simples, mas não sabem como escrever a dor.É o mesmo que o original. Não acho que seja legível se não entender os artigos de outras pessoas, embora não saiba se consigo entender todo mundo.
Devido à recente melhoria dos assuntos relacionados à graduação, não há muito tempo para ler e estudar, e a qualidade pode ser reduzida.No futuro, compartilharemos mais produtos secos com todos.
