vue 경로 내 비게 이 션 수비 와 차단 요청 및 node 기반 token 인증 방법

로그 인 인증 과 권한 제어 가 언제 필요 합 니까?
1.업무 시스템 은 보통 로그 인해 야 제 한 된 자원 에 접근 할 수 있 고 사용자 가 로그 인하 지 않 은 상황 에서 제 한 된 자원 에 접근 하려 면 로그 인 페이지 로 다시 설정 해 야 합 니 다.
2.여러 업무 시스템 간 에 단일 로그 인 을 실현 해 야 합 니 다.즉,한 시스템 이나 이미 로그 인 한 상황 에서 다른 시스템 에 다시 방문 할 때 중복 로그 인 할 필요 가 없습니다.로그 인 이 만 료 되 거나 효력 을 잃 었 을 때 로그 인 페이지 로 다시 설정 해 야 합 니 다.
어떻게 경로 수 비 를 사용 합 니까?
index.js 페이지 를 정의 하여 페이지 의 경 로 를 정의 합 니 다.코드 는 다음 과 같 습 니 다.

import Vue from 'vue'
import Router from 'vue-router'
import blogIndex from '@/views/index'
import loginComponent from '../components/common/login'
Vue.use(Router)
const routes = [
 {
  path: '/blog',
  name: 'blogIndex',
  component: blogIndex
 },
 {
  path: '/login',
  name: 'login',
  component: loginComponent
 }
];
const router = new Router({
 mode: 'hash', // mode   history      #， hash     
 routes
});
export default router;

페이지 의 경 로 를 정의 하기 위해 guarder.js 페이지 를 정의 합 니 다.코드 는 다음 과 같 습 니 다.

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
export default function (router) {
  router.beforeEach((to, from, next) => {
   NProgress.start()
   console.log(to.path, '121212');
   if(localStorage.getItem("useName") === 'null' && to.path !== '/login') {
    console.log(to.path, 'totototototototo2');
    next({path: '/login'})    
   }else{
    next()
   }
  });
  router.afterEach((to, from) => {
    NProgress.done()
  })
}

여기 서 사용 하 는 방법 은 사용자 가 로그 인 할 때 사용자 이름 을 로 컬 에 저장 하여 사용자 이름 이 존재 하 는 지 판단 하고 존재 하지 않 으 면 로그 인 페이지 로 이동 하 는 것 입 니 다.
그리고 main.js 에 guarder.js 파일 을 도입 합 니 다.

//       
import guarder from './help/guarder'
//       
guarder(router)

이렇게 하면 전단 에서 길 을 막 는 작용 을 할 수 있다.
node http 차단 에 맞 춰 token 인증
token 인증 을 하려 면 token 이 있어 야 합 니 다.jsonwebtoken 모듈,cnpm i jsonwebtoken--save 를 설치 해 야 합 니 다.
노드 의 루트 모듈 에서 도입

var jwt = require("jsonwebtoken");
//   
Router.post('/login',function(req,res,next){
  let params = {
    useName: req.body.useName,
    passWord: req.body.passWord,
  };
  userModel.find(params,function(err,doc){
   if(err) {
      res.json({
        states: 0,
        msg: err.message
      });
    }else {
      //               token      ，            
        let token = jwt.sign(params, '123456', {
            expiresIn: 60*60*1 //token    ，   12345   ，      
        });
        console.log(token, 'tokentokentokentokentoken');
        res.json({
          states: 1,
          msg: doc,
          token: token
        });
      }
    }
  });
});

http.js 파일 을 정의 합 니 다.코드 는 다음 과 같 습 니 다.

import axios from 'axios'
import router from '../router'
/**
 *          ，         
 */
axios.interceptors.request.use(function (config) {
  //             
  let token = localStorage.getItem("token");
  if(token !== 'null'){
    config.headers.token = token;
    // config.headers.Authorization = `token ${sessionStorage.getItem('token')}`
  }
  // console.log(config,'configconfigconfigconfigconfig');
  return config
 })
 
 /**
  *  ajax        ，           、             
  */
 axios.interceptors.response.use(function (res) {
  //            
  console.log(res.data.status,'resresresresresresres');
  if(res.data.status === 0) {
    router.replace({
      path: 'login'
    })
  }
  return res
 })

 export default axios

main.js 에 http 모듈 을 도입 하여 vue 인 스 턴 스 에 주입 합 니 다.

import http from './help/http'
new Vue({
 el: '#app',
 router,
 store,
 http,
 components: { App },
 template: '<App/>'
})

위 코드 에서 request 부분 은 token 이 존재 하 는 지 판단 하고 token 을 요청 머리 에 저장 합 니 다.두 꺼 운 백 엔 드 는 이 token 을 받 아들 입 니 다.

//       
Router.post('/getNewUser',function(req,res,next){
  console.log(req.headers.token, 'req.headerreq.headerreq.header');
  let params = {};
  let newUser2 = newUserModel.find(params).skip(0).limit(10).sort({_id:-1});
  newUser2.exec(function(err,doc){
    if(err) {
       res.json({
         states: 0,
         msg: err.message
       });
     }else {
      let token = req.headers.token; //  headers   token
      //     ，  token    ，     status  
      jwt.verify(token, '123456', function (err, decode) {
        if (err) { //        /    token 
          res.json({
            states: 1,
            msg: doc,
            status: 0
          });    
          // res.send({'status':0});      
        } else {
          res.json({
            states: 1,
            msg: doc,
            status: 1
          });  
        }
      })
      // res.json({
      //   states: 1,
      //   msg: doc
      // });
     }
  });
 });

위의 코드 에서 response 부분 은 되 돌아 오 는 status 를 받 아 token 의 실효 여 부 를 판단 하고 실효 되면 로그 인 페이지 로 건 너 뜁 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.