nuxt.jsはmiddleware(中間部品)でルート認証操作を実現する。
7425 ワード
ルート認証:このルートの現在の閲覧者にアクセス権限が必要かどうかを判断します。
普通はクッキーに格納されているtokenを判断して判断します。
middlewareフォルダの下にauth.jsのファイルを新規作成します。
現在auth.jsファイル内でcookieにtokenフィールドが含まれているかどうかを判断します。
~/uitls/get Cookie.js
まず、js-cookieをダウンロードします。
例えば~/page/index.vueで使う
1.js-cookieの取り付け
npm install js-cookie--save
2.使用
1参照
import Cookie from'js-cookie'
2クライアント使用
1.基礎版
私は複雑なバージョンを変えて、異なった方法名になるべきで、異なっている呼び出し方法、しかしnextは設定してよくて、比較的に新米に適して見ます。
1.まず、ここでは関数を使ってプログラムし、関数に変数に値を与えます。
2.js classとプロトタイプのthis原理を巧みに利用しています(継承の関数が呼び出された時、thisは継承の対象であり、継承の関数があるプロトタイプのオブジェクトではありません。)
原理分析
1.なぜリンクができますか?
1.ツール2を利用して、原型のthisがチェーンの原理を達成しました。
最初のuseの呼び出し時、彼のpreviousは最も原始的なthis.middlewareです。
また、クラスのthis.middlewareを自分のものに変えます。
第二の呼び出し時に彼のpreousは最初のthis.middlewareです。
同じ理屈で、n個と同じ設定です。
最後の呼び出しが完了したら、この時のthis.middlewareは最後の設定を指します。
2.どのようにトリガするか
これはrunの方法を使っています。本当にjavaのスレッドモジュールのように見えます。
起動したのは最後のバインディングのthis.middlewareです。前に言ったように。
だから、あなたがクリックすると、すぐにfetch()の方法に出発します。
3.どのように最初にトリガしますか?
私の前の言い方では、まず最後のトリガになるはずです。なぜ彼は最初のトリガになりますか?はい、複雑なバージョンを使う時も、私はとても愚かで、よく分かりませんでした。そして、最初から彼女をいろいろな方法に変えて、これらの方法を順次調整しました。
もっと再帰と呼ぶべきです。もしnext()の方法の後で、相応の方法を記入したら、同じように実行します。再帰と同じです。しかし、彼はまたチェーンの特性があります。本当に不思議です。
これは彼のチェーンを使って、私が前に話した2点です。
これで彼は初めて帰った。
4.順次トリガを開始し、中間部品の一回の呼び出しを達成する。
彼は呼び出しを開始しました
呼び出しが完了したら、リセットに戻ります。
そして最初に来た道を元の道に戻ってきます。
2.上級版は、コードをどう節約するかが中級の目標です。
jsの黒い魔法は本当に面白いです。
特にデバッグする時、慣れないなら、彼は一回だけ運転したと思います。実は、彼はもう何回も運転しました。
外は二重になっています。コールを使う時、関数を使ってプログラムします。彼は一番内側にあるnext()の方法を読めません。
彼はここでsetimeoutを使っています。プログラムはすぐに実行されました。nextがないか、nextが実行されていないか、彼はすぐに戻ってきます。
しかし、タイマーが来たらすぐに呼び出します。これが原因です。
以上のnuxt.jsはmiddleware(中間部品)の中でルート認証操作を実現しました。つまり、小編は皆さんに共有した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。
普通はクッキーに格納されているtokenを判断して判断します。
middlewareフォルダの下にauth.jsのファイルを新規作成します。
現在auth.jsファイル内でcookieにtokenフィールドが含まれているかどうかを判断します。
import getCookie from '~/utils/getCookie'
export default function ({route, req, res, redirect}) {
let isClient = process.client;
let isServer = process.server;
let redirectURL = '/sign';
var token, path;
//
if (isServer) {
// cookie
let cookies = getCookie.getcookiesInServer(req)
// cookie token
token = cookies.token ? cookies.token : ''
}
//
if (isClient) {
// ( )cookie token
token = getCookie.getcookiesInClient('token')
}
// token
// ,
if (!token) {
redirect(redirectURL)
}
}
クッキーを取得するファイルを新規作成します。~/uitls/get Cookie.js
まず、js-cookieをダウンロードします。
npm i js-cookie -s
import Cookie from 'js-cookie'
export default {
// cookie
getcookiesInServer:function (req) {
let service_cookie = {};
req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (val) {
let parts = val.split('=');
service_cookie[parts[0].trim()] = (parts[1] || '').trim();
});
return service_cookie;
},
// cookie
getcookiesInClient:function (key) {
return Cookie.get(key) ? Cookie.get(key) : ''
}
}
ルート認証が必要なページで使用します。例えば~/page/index.vueで使う
<script>
export default {
name: 'index',
// auth middleware auth.js
middleware: 'auth',
}
</script>
js-cookie拡張1.js-cookieの取り付け
npm install js-cookie--save
2.使用
1参照
import Cookie from'js-cookie'
2クライアント使用
// 1.
Cookie.get(key)
// 2.
Cookie.set('name', value, {expires: })
// 3.
Cookie.remove("name")
// :
let seconds = 3600; // /
let expires = new Date(new Date() * 1 + seconds * 1000);
補足知識:js中間部品の簡単な実現原理1.基礎版
私は複雑なバージョンを変えて、異なった方法名になるべきで、異なっている呼び出し方法、しかしnextは設定してよくて、比較的に新米に適して見ます。
class Middleware {
constructor () {
this.middleware = (next)=>{//console.log("this.middleware: "+next)
/*this.middleware: () =>{
console.log("use: "+fn.call(this, next));
return fn.call(this, next)*/
return next();
}
}
run (fn) {
// console.log(this)
this.middleware(
() => fn.call(this,"nihaoafddsf")
)
}
use (fn) {
const previousFn = this.middleware
this.middleware=(next)=>{
// console.log(next)
/*() =>{
console.log("fetch: "+fn.call(this, next));
return fn.call(this, next)
}*/
previousFn.call(this, () =>{
// console.log("use: "+fn.call(this, next));
return fn.call(this, next)
})
}
}
fetch(fn){
const previousFn = this.middleware
this.middleware=(next)=>{
// console.log(next)//() => fn.call(this,"nihaoafddsf")
previousFn.call(this, () =>{
console.log("fetch: "+fn)
return fn.call(this, next)
})
}
}
}
let bnm = new Middleware;
bnm.use(
(next)=>{
console.log(3)
console.log(next)
next()
}
)
bnm.fetch((next)=>{
console.log("nihaoa")
next()
})
bnm.run(function (canshu) {
console.log(1)
console.log(canshu)
})
ツール1.まず、ここでは関数を使ってプログラムし、関数に変数に値を与えます。
2.js classとプロトタイプのthis原理を巧みに利用しています(継承の関数が呼び出された時、thisは継承の対象であり、継承の関数があるプロトタイプのオブジェクトではありません。)
原理分析
1.なぜリンクができますか?
1.ツール2を利用して、原型のthisがチェーンの原理を達成しました。
最初のuseの呼び出し時、彼のpreviousは最も原始的なthis.middlewareです。
また、クラスのthis.middlewareを自分のものに変えます。
第二の呼び出し時に彼のpreousは最初のthis.middlewareです。
同じ理屈で、n個と同じ設定です。
最後の呼び出しが完了したら、この時のthis.middlewareは最後の設定を指します。
2.どのようにトリガするか
これはrunの方法を使っています。本当にjavaのスレッドモジュールのように見えます。
起動したのは最後のバインディングのthis.middlewareです。前に言ったように。
だから、あなたがクリックすると、すぐにfetch()の方法に出発します。
3.どのように最初にトリガしますか?
私の前の言い方では、まず最後のトリガになるはずです。なぜ彼は最初のトリガになりますか?はい、複雑なバージョンを使う時も、私はとても愚かで、よく分かりませんでした。そして、最初から彼女をいろいろな方法に変えて、これらの方法を順次調整しました。
もっと再帰と呼ぶべきです。もしnext()の方法の後で、相応の方法を記入したら、同じように実行します。再帰と同じです。しかし、彼はまたチェーンの特性があります。本当に不思議です。
これは彼のチェーンを使って、私が前に話した2点です。
これで彼は初めて帰った。
4.順次トリガを開始し、中間部品の一回の呼び出しを達成する。
彼は呼び出しを開始しました
呼び出しが完了したら、リセットに戻ります。
そして最初に来た道を元の道に戻ってきます。
2.上級版は、コードをどう節約するかが中級の目標です。
jsの黒い魔法は本当に面白いです。
特にデバッグする時、慣れないなら、彼は一回だけ運転したと思います。実は、彼はもう何回も運転しました。
class Middleware {
constructor () {
this.i = 0;
this.middleware = (next) => { console.log(next);return next()}
}
run (fn) {
console.log(this)
this.middleware(
() => fn.call(this)
)
}
use (fn) {
const previousFn = this.middleware
this.middleware = (next) =>
previousFn.call(this, () =>{
console.log(fn);
return fn.call(this, next)
})
}
}
const instance = new Middleware()
instance.use(function (next) {
setTimeout(() => {
console.log('first')
this.firstMiddlewareLoaded = true
next()
}, 500)
})
instance.use(function (next) {
setTimeout(() => {
console.log('second')
this.secondMiddlewareLoaded = true
next()
}, 250)
})
instance.use(function (next) {
console.log('third')
this.ThirdMiddlewareLoaded = true
next()
})
const start = new Date()
instance.run(function () {
console.log('first middleware loaded:', this.firstMiddlewareLoaded)
console.log('second middleware loaded:', this.secondMiddlewareLoaded)
console.log('Third middleware loaded:', this.ThirdMiddlewareLoaded)
console.log('time passed:', new Date() - start)
})
书き方は同じですが、ここにはいろいろな疑问があります。外は二重になっています。コールを使う時、関数を使ってプログラムします。彼は一番内側にあるnext()の方法を読めません。
彼はここでsetimeoutを使っています。プログラムはすぐに実行されました。nextがないか、nextが実行されていないか、彼はすぐに戻ってきます。
しかし、タイマーが来たらすぐに呼び出します。これが原因です。
以上のnuxt.jsはmiddleware(中間部品)の中でルート認証操作を実現しました。つまり、小編は皆さんに共有した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。