Vue에서 로그인 인증에 성공하면 token을 저장하고 매번 token 작업을 가져오고 검증하도록 요청합니다.

vue에서는 *Storage(sessionStorage,localStorage)**로 token을 저장하거나 vuex로 저장할 수 있습니다(단, 페이지 리셋 데이터가 사라지는 문제를 고려하려면 vuex에서 Storage를 사용할 수 있습니다).
다음은 localStorage로 저장하는 방법입니다.
로그인 요청이 성공하면 loaclStorage로 저장되는 token 값이 반환됩니다.
localStorage.setItem('token',res.data.token)
메인js에서 전역 요청 헤더와 응답을 설정하는 판단

// axios token
Axios.interceptors.request.use(config => { 
 if (config.push === '/') { 
  } else { 
   if (localStorage.getItem('token')) { 
     // token， token  
     config.headers.token=localStorage.getItem('token');  
   } 
  } 
   return config; 
 }, 
 error => { 
  return Promise.reject(error);
 });

//=============================
// token 
Axios.interceptors.response.use(response => { 
  console.log(' ：'+response.data.code) 
  // token 403 
  if (response.data.code == 403) {
    //  elementui message   
    ElementUI.Message({  
     message: ' ', 
     type: 'err'  
     });
    // token 
    localStorage.removeItem('token ');
    //   
    router.push({name: 'login'}); 
   } else { 
     return response 
   } 
  }, 
 error => { 
  return Promise.reject(error); 
  })

router의 index에서 전역 수위를 설정하여 token이 있는지 판단하고 존재하지 않으면 로그인 페이지로 돌아갑니다

router.beforeEach((to, from, next) => {
//to  from  next    
 if (to.path === '/') {
 // ，  
 next(); 
 } else {
 // localStorage 
  let token = localStorage.getItem('token ');   
  if (token == null || token === '') { 
    console.log(' ')  
    next({name: 'login'});
   } else {
     next(); 
   } 
}});

추가 정보: 서버에서 반환된 AuthorizationToken 정보를 가져오고 저장하며 요청마다 token을 추가합니다.
백엔드는 jwt의 token으로 신분 권한 검증을 하기 때문에 백엔드는 로그인한 후에 token을 응답 헤더에 추가합니다. 따라서 백엔드는 이 token을 저장하고 매번 요청한 요청 헤더에 token을 추가해야 서버에서 token을 획득하여 신분 인증을 할 수 있습니다.
프론트에서 vue 프로젝트를 사용합니다.
loging.vue(로그인 구성 요소)

{
 submitForm(formName) {
 this.$axios
  .post('/api/admin/login', {
  userName: this.ruleForm.userName,
  password: this.ruleForm.password
  })
  .then(successResponse => {
  this.responseResult = JSON.stringify(successResponse.data)
  this.msg = JSON.stringify(successResponse.data.msg)
  if (successResponse.data.code === 200) {
  this.msg='';
  localStorage.setItem('userName',this.ruleForm.userName);
  // AuthorizationToken 
  var authorization=successResponse.headers['authorization'];
  localStorage.setItem('authorization',authorization);
  // 
  this.$router.push('/dashboard');
  
  }
  })
  .catch(failResponse => {})
 }
 }

main.js(전역 구성 js):

// vue 
axios.interceptors.request.use(function (config) {
 let token = localStorage.getItem('authorization');
 if (token) {
 config.headers['Authorization'] = token;
 }
 return config;
})

여기에 토큰이 기한이 지나면 효력을 잃는 문제도 고려해야 하며, 블로거들은 다음에 따로 블로그를 써서 보충할 것이다.
위의 Vue에서 로그인 검증에 성공한 후에 token을 저장하고 매번 token 조작을 휴대하고 검증하는 것이 바로 여러분이 공유한 모든 내용입니다. 참고하시고 저희를 많이 사랑해 주시기 바랍니다.