VueJS / Flask / - Как мне защитить страницы / маршруты на передней панели с помощью JWT, сгенерированных на задней панели?

Question

Итак, я создал небольшую 2-страничку VUE со страницей входа, а затем перенаправил на страницу поиска. При входе в систему Python обрабатывает проверку LDAP и создает JWT, и похоже, что он существует в файлах cookie в браузере, однако я не уверен, как с этим справиться, когда вернулся в страну «Vue».

Вдобавок я подумал, что хранить эту информацию в файлах cookie в браузере было не лучшим решением .... хммммм

const routes = [
  {
    path: '/',
    name: 'home',
    component: LoginEntry,
    props:{test:'Service Center Search Portal'}
  },
  {
    path: '/scsearch',
    name: 'scsearch',
    component: SearchView
  },

Файлы cookie, которые я вижу ... добавленное изображение

Добавлен код

router.beforeEach(async (to, from, next) => {
  console.log('runniing router');
  console.log(to.name);
  
  if (to.name === "scsearch") {
  
    const response = await axios.get('/api/jwt/check');
    console.log('juust did call');
    console.log(response.status);
    if ( response.status === 401 ) {
      console.log('ressponse status 401');
      return next({ name: "home" });
  }
  console.log('doing noothiing');
  next();
}else{
  next();
}
});

Добавлен код -2 (рабочий)

router.beforeEach(async (to, from, next) => {
  console.log('runniing router');
  console.log(to.name);
 
  if (to.name === "scsearch") {
 
  console.log('doing call');
  const response = await axios.get('/api/jwt/check')
  .then(function(value){
    console.log(value);
    next('/');
  })
  .catch(function(err){
    console.log(err)
  });
  
  console.log('juust did call');
  console.log(response);

  console.log('doing noothiing');
  next();
}else{
  next();
}
});

Answer 1

Я все еще не уверен, что это то, что вы хотите, но из вашего вопроса я предполагаю, что:

1. Вы используете Vue SPA
2. Вы хотите, чтобы пользователь который не вошел в систему, не может получить доступ к маршруту /scsearch в вашем Vue приложении
3. Вы сохраняете свой JWT на cook ie и к нему можно получить доступ с помощью document.cookie
4. Если есть JWT on cook ie, это означает, что пользователь вошел в систему, если нет JWT на cook ie, это означает, что пользователь вышел из системы.

То, что вы хотите, это Navig Guard , вот как вы его используете:

// function to get cookie by name, taken from https://stackoverflow.com/a/15724300/12397250
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}



const router = new VueRouter({ ... })

// do something everytime user is changing route
router.beforeEach((to, from, next) => {
  // if user is accesing route "ssearch" and not logged in, redirect to home
  // assuming you store your jwt on your cookie with key "authtoken"
  if (to.name === "ssearch" && !getCookie("authtoken")) {
    // User is not logged in, redirect to route "home"
    // return here is important so you don't call other next() below
    return next({ name: "home" });
  }

  // Do nothing
  next();
});

const app = new Vue({
  router
}).$mount('#app')

Изменить:

Поскольку вы используете HTTPOnly cook ie, вам необходимо проверить это, отправив запрос к вашему backend API.

например:

router.beforeEach(async (to, from, next) => {

  
  if (to.name === "ssearch") {
    // You need to implement this function, you can use XHR, or library like axios. 
    // You also need to add new endpoint to check cookies on your flask app
    const response = await http.get("http://yourbackend.com/api/auth/check");
    
    // Assuming if the jwt verification failed, it returns 401
    if ( response.status === 401 ) {
      return next({ name: "home" });
    }
  }

  next();
});

Answer 2

Что касается JWT, лучшего места для их хранения, чем ie повара, нет. LocalStorage / sessionStorage может быть небезопасным (прочтите об атаках с использованием межсайтовых сценариев).

У меня нет опыта работы с Vue, но я думаю, чтобы защитить вашу «страницу поиска», у вас должно быть что-то в вашем местном штате, где указано, что автор авторизован, если он не направляет клиента на страницу входа.