vue 개발:vue+axios 로그 인 차단 실현

하나의 프로젝트 학회 전단 에서 로그 인 차단 을 실현 하 다.
한 프로젝트 학회 vue 온 가족 통+axios 로그 인,차단,로그 인 기능,그리고 axios 의 http 차단 기 를 이용 하여 요청 과 응답 을 차단 합 니 다.
머리말
이 프로젝트 는 Github 에서 제공 하 는 personal token 을 로그 인 token 으로 이용 하여 token 을 통 해 Repository List 를 방문 합 니 다.이 프로젝트 를 통 해 전단 프로젝트 에 필요 한 로그 인 및 차단,로그 인,token 의 실효 차단 및 axios 차단기 사용 을 어떻게 실현 하 는 지 배 웁 니 다.준 비 를 하려 면 먼저 자신의 Github Personal Token(Token 생 성)을 만들어 야 합 니 다.Token 생 성 후 접근 Demo,당신 의 Repository List 를 볼 수 있 습 니 다.
프로젝트 구조

.
├── README.md
├── dist  //          
│   ├── build.js
│   └── build.js.map
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── css.css
│   │   ├── icon.css
│   │   └── logo.png
│   ├── constant
│   │   └── api.js  //   api    
│   ├── http.js //   fetch、post   http        
│   ├── index.vue
│   ├── login.vue
│   ├── main.js
│   ├── repository.vue
│   ├── router.js //       
│   └── store
│       ├── store.js  
│       └── types.js  // vuex types
└── webpack.config.js

기술 창고

Vue 2.0

vue-router

vuex

axios

vue-material

로그 인 차단 논리
STEP 1:경로 차단
우선 루트 를 정의 할 때 사용자 정의 필드requireAuth를 하나 더 추가 해서 루트 의 접근 에 로그 인 이 필요 한 지 판단 해 야 한다.사용자 가 로그 인 을 했 으 면 경로 에 순조롭게 들 어가 지 않 으 면 로그 인 페이지 에 들 어 갑 니 다.

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {
            requireAuth: true,  //      ，              
        },
        component: Repository
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

경 로 를 정의 한 후에 우 리 는 주로vue-router가 제공 한 갈고리 함수beforeEach()를 이용 하여 경 로 를 판단 한다.

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  //              
        if (store.state.token) {  //   vuex state     token    
            next();
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}  //       path    ，           
            })
        }
    }
    else {
        next();
    }
})

각 갈고리 방법 은 세 개의 인 자 를 받는다.

to:경로:곧 들 어 갈 목표 경로 대상

from:경로:현재 내 비게 이 션 이 떠 나 려 는 경로

next:Function:이 방법 으로 이 갈 고 리 를 해결 해 야 합 니 다.실행 효 과 는 next 방법의 호출 매개 변수 에 의존 합 니 다.

next():파이프 의 다음 갈 고 리 를 진행 합 니 다.모든 갈고리 가 실행 되면 내 비게 이 션 의 상 태 는 confirmed(확인)입 니 다.

next(false):현재 내 비게 이 션 을 중단 합 니 다.브 라 우 저의 URL 이 변경 되면(사용자 가 수 동 또는 브 라 우 저 후퇴 버튼 일 수 있 음)URL 주 소 는 from 경로 에 대응 하 는 주소 로 초기 화 됩 니 다.

next('/')또는 next({path:'/'}):다른 주소 로 이동 합 니 다.현재 내 비게 이 션 이 중 단 된 후에 새로운 내 비게 이 션 을 진행 합 니 다.

next 방법 을 사용 해 야 합 니 다.그렇지 않 으 면 갈고리 가 resolved 되 지 않 습 니 다.
완전한 방법 참조/src/router.js그 중에서to.meta는 우리 가 정의 한requireAuth필드 를 포함 하여 사용자 정의 데이터 입 니 다.이 필드 를 통 해 로그 인 권한 이 필요 한 지 여 부 를 판단 합 니 다.필요 하 다 면 현재 응용 프로그램 에 token 이 존재 하지 않 으 면 로그 인 페이지 로 이동 하여 로그 인 합 니 다.로그 인 성공 후 목표 경로 로 이동 합 니 다.
로그 인 차단 여기 서 끝나 나 요?아 닙 니 다.이런 방식 은 간단 한 전단 경로 제어 일 뿐 사용자 가 로그 인 권한 이 필요 한 경로 에 접근 하 는 것 을 진정 으로 막 을 수 는 없다.또 다른 상황 은 현재 token 이 효력 을 잃 었 지만 token 은 여전히 로 컬 에 저장 되 어 있다 는 것 이다.이 때 로그 인 권한 이 필요 한 경로 에 접근 할 때 실제로 사용 자 를 다시 로그 인 시 켜 야 합 니 다.이 럴 때 http 차단기+백 엔 드 인터페이스 에서 돌아 오 는 http 상태 코드 를 결합 하여 판단 해 야 합 니 다.
STEP 2:차단기
모든 http 요청 과 응답 을 통일 적 으로 처리 하려 면 axios 차단 기 를 사용 해 야 합 니 다.설정http response inteceptor을 통 해 백 엔 드 인터페이스 가 되 돌아 오 면401 Unauthorized（ ）다시 로그 인 합 니 다.

// http request    
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  //       token，      ，   http header   token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response    
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    //    401   token          
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   //            
    });

완전한 방법 은/src/http.js참조.
위의 두 단 계 를 통 해 전단 에서 로그 인 차단 을 실현 할 수 있 습 니 다. 기능 도 간단 합 니 다.현재 token 을 제거 하고 홈 페이지 로 이동 하면 됩 니 다.
axios 에 대하 여
axios 에 대해 서 는 vue 를 처음 배 운 사람들 이 문 서 를 이해 하기 어렵다 고 생각 합 니 다.나 도 처음 엔 그 랬 어.그러나 이런 프로젝트 를 통 해 내 려 온 결과 axios 는 이해 하기 어렵 지 않 았 다.axios 를 공부 할 때 아래 의 목적 을 가지 고 문 서 를 보 는 것 이 더욱 효율 적 이 라 고 권장 합 니 다.아래 의 내용 을 파악 하면 기본적으로 프로젝트 에서 axios 를 사용 할 수 있 기 때문이다.

http 요청 방법

http 요청 성공 시 되 돌아 오 는 데이터 및 형식

http 요청 실패 처리

차단기 사용

http 설정

axios 문서
실행 및 구축

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

항목 주소:https://github.com/superman66/vue-axios-github 환영 스타+문제.
전송:https://segmentfault.com/a/1190000008383094?_ea=1639495