登録とログインの認証は、Webサイトにとって非常に重要です。個人情報を保護できるだけでなく、その後の操作を容易にすることもできます。
01序文
今日は、ログインと登録のプロセスについてお話します。ログインには多くの状況があることがわかっています。たとえば、アカウントのパスワードを使用してログインしたり、スキャンコードを使用してログインしたり、サードパーティのアカウントを使用してログインしたりできます。実際、原則は同じですが、自分のアカウントが妥当であることを確認してくださいログイン情報が有効かどうか。
しかし、この記事では、単純なログインプロセスを使用することの謎を説明します。一般的に言えば、ログインに成功するとサーバーからトークンが返されますが、これが不合理な文字列であるとは思わないでください。実際、私たちのアカウントの情報はトークンに保存され、暗号化操作の後でのみ、復号化後に情報を取得できます。
02準備
最初はjwtがわからないかもしれませんが、簡単に言うと、これはユーザー情報の暗号化されたバージョンです。アカウントを暗号化したり、復号化したりできます。これを理解し、それを使用して小さなことを行うことができます。私たちは、vue + jwt + node + mysqlなどの単純なアーキテクチャを使用しています.vueページにログイン操作を書き込むだけで、ノードを使用してログインを書き込むことができますインターフェースは十分です。
ほとんどの小さな友達の世話をするために、プロセスについてもう少し詳しく説明します。最初にmysqlとjsonwebtokenの2つのプラグインをインストールする必要があります。
データベースにアクセスする
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();
})
})
},
//接下来可以写更多的接口
}
インターフェースを作成するルートもあります。つまり、データベースに接続し、これをリクエストしたときにデータベースにクエリを送信します。
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;
上記ではまだsqlMapのオブジェクトを使用していますが、将来の便宜のために1つ個別に記述しています。結合は低く、拡張も簡単です。
var sqlMap = {
login: 'select * from teacher where teacherName = ? and `password` = ?;',
}
//最后也记得要导出
module.exports = sqlMap;
このようにして、このオブジェクトをファイルに導入するときに使用できます。これにより、多くのSQLステートメントクエリも記述できます。
あまりにも多くのことを言ったので、サービスを開始する必要があります。次に、作成したすべてのインターフェイスを呼び出すことができるサービスを開始するだけです。これはメインファイルであり、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......');
このようにして、ノードindex.jsの後にポート3000をリッスンし、この時点でサービスが開始され、データベース部分が開かれます。
フロントページ
ここでは説明として、美しいページを書く必要はありません。入力ボックスは2つあります。Vueには双方向のデータバインディング機能があるため、入力ボックスの内容を簡単に取得し、アカウントパスワードを使用して渡すことができます。バックエンドにSQLクエリを実行します。それはどうですか、それは特に簡単ですか？
form: {
username: "",
password: "",
}
例えば、データの下には、このように入力ボックスのデータが格納されていますが、検証などの操作ができる場合は、elementuiコンポーネントライブラリを利用すると、新しい世界が見つかります。ここからは始まりません。
次に、メソッドにログインメソッドを記述して、バックエンドデータとやり取りします。これも非常に簡単な操作です。
//在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("登录失败");
}
});
}
トークンをvuexで書き込んで、それをグローバルな状態で管理するためのsessionStorageに配置したことがわかります。たとえば、ホームページに名前を表示し、将来的にアクセス許可を制御することは非常に実用的です。これを使用して、$ Store.state.userを将来のユーザー情報を取得できます。
トークンを直接解析できるユーザーデータを使用する必要がある場合は、ここにユーザー名とID情報を格納する追加のフィールドを作成しました。ここでは、データを解析するために、jwtに付属する関数メソッドを使用します。トークンはグローバルに保存したトークンであり、シークレットは暗号化に使用したものなので、スムーズに解析できます。
//这里也要引入
//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まとめ
この記事では、jwtを使用して単純なログイン検証操作を実行する方法についてのみ説明しました。これは、一部の白人の学生が試してみるのに適しています。結局、これは最も一般的に使用されるnpmパッケージの1つでもあります。実際、インターネット上の多くのチュートリアルでは、検証にjwtを使用する方法を説明していますが、このような単純なナレッジポイントは非常に複雑である必要があると思いますか？実は小梅の心の痛みがわからず、最初は使い方がわからなかったのですが、細かいところまで気づいて、ようやく実現しました。
実際、私の記事は基礎が苦手な学生を対象にしたものですが、簡単な機能を作りたいが、痛みの書き方がわからないということは理解しています。他の人の記事を理解できなくても読みやすいとは思いませんが、みんなが理解できるかどうかはわかりません。
近年の卒業関係の改善により、読む時間や勉強する時間が少なくなり、品質が落ちる可能性がありますが、今後は乾物をもっと多くの人と共有していきます。
