nuxt.js 는 middleware(미들웨어)에서 경로 감정 권 조작 을 실현 합 니 다.

경로 감 권:이 경로 가 현재 탐색 자 에 게 권한 이 필요 한 지 판단 하 는 것 입 니 다.
일반적으로 나 는 쿠키 에 저 장 된 token 을 판단 함으로써 판단 한다.
middleware 폴 더 아래'auth.js'파일 을 새로 만 듭 니 다.
현재 auth.js 파일 에서 쿠키 에 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/getCookie.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 페이지 에서 사용 합 니 다.
예 를 들 어~/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.사용
인용
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 를 자신의 것 으로 바 꿉 니 다.
두 번 째 호출 이 있 을 때,그의 preious 는 첫 번 째 this.middleware 이다.
같은 이치,n 개의 같은 설정
마지막 호출 이 끝 났 을 때,이 때 this.middleware 는 마지막 설정 을 가리 키 고 있 습 니 다.
2.어떻게 촉발 합 니까?
run 방법 을 사 용 했 습 니 다.정말 자바 스 레 드 모듈 처럼 보 입 니 다.

마지막 으로 연 결 된 this.middleware 를 시작 합 니 다.앞에서 말 했 듯 이.
그래서 당신 이 클릭 할 때 바로 fetch()방법 으로 출발 하 는 것 을 볼 수 있 습 니 다.
3.어떻게 시작
내 앞의 설법 에 따 르 면 먼저 마지막 을 촉발 시 켜 야 한다.왜 그 가 첫 번 째 를 촉발 시 켰 는 지,그래,내 가 복잡 한 판 을 사 용 했 을 때 나 도 어 리 석고 이해 가 되 지 않 았 다.그리고 처음에 나 는 그녀 를 여러 가지 다른 방법 으로 만 들 었 고 이런 방법 들 을 순서대로 사용 했다.이렇게 해서 마침내 그것 의 세 번 의 체인 을 벗 겼 다.
재 귀적 이 라 고 해 야 합 니 다.next()방법 에 해당 하 는 방법 을 작성 하면 똑 같이 실 행 됩 니 다.재 귀적 인 것 처럼.하지만 그 는 링크 의 특성 이 있 습 니 다.정말 신기 합 니 다.

이것 이 바로 그의 체인 호출 이용 이다.내 가 앞에서 말 한 두 가지 이다.
이렇게 해서 그 는 처음으로 돌 아 왔 다.
4.해당 하 는 것 을 순서대로 터치 하여 미들웨어 의 호출 을 달성 합 니 다.

그 는 호출 하기 시작 했다.
호출 완료 후 return 으로 돌아 가기

그리고 처음 오 는 길에 따라 원래 의 길 로 돌아간다.
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)
})

쓰 는 방법 은 여전히 같다.바로 여기에 많은 의문 이 있 는 문제 이다.주로 함수 세트 2 층 을 호출 하 는 문제 이다.
밖 에 두 겹 으로 되 어 있 습 니 다.콜 을 사용 할 때 함수 식 프로 그래 밍 을 사용 하면 가장 안쪽 에 있 는 next()방법 을 읽 을 수 없습니다.
그 는 프로그램 이 즉시 실행 되 었 거나 next()가 없 거나 next 가 실행 되 지 않 았 기 때문에 setimeout 을 사용 했다.그 는 바로 돌아 올 것 이다.
하지만 타 이 머 는 도착 하 자마자 바로 호출 되 었 다.이것 이 원인 이 고 의 심 스 러 운 문제 이기 도 하 다.
이상 의 nuxt.js 는 middleware(미들웨어)에서 경로 감 권 조작 을 실현 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.