Как добавить событие JavaScript в HTML-шаблон Django?

Мой текущий выход из системы - GET, я просто перенаправляю пользователя на /auth/logout

Однако я обнаружил, что это небезопасно, и пытаюсь добавить пост к этому перенаправлению. Кстати, мой логин использует django-allauth, поэтому я хочу использовать эту концепцию и здесь. Но мне нужно сделать это с помощью JavaScript, потому что мой front end написан на Vue.js.

https://django-allauth.readthedocs.io/en/latest/views.html#logout-account-logout

Это мой файл javascript, где я использую слишком много vue:

let userNavigation = [
  { name: 'Account', href: '/account/'},
  { name: 'Logout', href: '/auth/logout'}
]

Это мой HTML с использованием vue

const menu =
  `
        <MenuItems>
            <MenuItem v-for="item in userNavigation" :key="item.name">
          <a :href="item.href">
                    [[ item.name ]]
                </a>
            </MenuItem>
        </MenuItems>
`

Вот что я пытаюсь сделать для:

<script type="text/javascript">

  function logoutPost() {

    let form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', '/auth/logout/');

    let csrf = document.createElement('input');
    csrf.setAttribute('type', 'hidden');
    csrf.setAttribute('name', 'csrfmiddlewaretoken');
    csrf.setAttribute('value', '{{ csrf_token }}');

    form.appendChild(csrf);
    document.body.appendChild(form);

    let logoutAnchor = document.getElementsByName('Logout')[0].value;
    form.appendChild(logoutAnchor);
    logoutAnchor.addEventListener('click', function (e) {
      e.preventDefault();
      form.submit();
      console.log("logout clicked");
    });
  }

</script>

Но даже если я пытаюсь добавить JavaScript DOM, ничего не меняется, я ничего не вижу в журнале консоли и он просто перенаправляет. Где я делаю ошибку?

Вернуться на верх