mirror of
https://github.com/ajurna/cbwebreader.git
synced 2026-11-02 10:36:55 +00:00
ajurna
79c0647cc4
- Introduced `CookieJWTAuthentication` for authentication via HttpOnly cookies, enabling browser-initiated requests without `Authorization` headers. - Added authentication views (`CookieTokenObtainPairView`, `CookieTokenRefreshView`, `CookieTokenBlacklistView`) to replace default SimpleJWT views. - Updated Vuex store and frontend logic to handle sessions using HttpOnly cookies instead of localStorage. - Enhanced backend and frontend configurations (Django settings, router, Vuex, and API service) to fully support cookie-based authentication. - Updated authentication tests to ensure correct cookie handling and authentication flows.
71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
<template>
|
|
<nav class="navbar navbar-expand-lg bg-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#"><img src="/static/img/logo.svg" width="35" class="d-inline-block align-top" alt="CB"> Web Reader</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<!-- Show these links only when user is authenticated -->
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0" v-if="isAuthenticated">
|
|
<li class="nav-item">
|
|
<router-link :to="{name: 'browse'}" class="nav-link" >Browse</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link :to="{name: 'recent'}" class="nav-link" >Recent</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link :to="{name: 'history'}" class="nav-link" >History</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link :to="{name: 'account'}" class="nav-link" >Account</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link :to="{name: 'user'}" class="nav-link" v-if="this.$store.getters.is_superuser">Users</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" @click="logout">Log Out</a>
|
|
</li>
|
|
</ul>
|
|
<!-- Show login link when user is not authenticated -->
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0" v-else>
|
|
<li class="nav-item">
|
|
<router-link :to="{name: 'login'}" class="nav-link">Log In</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
<script>
|
|
import store from "@/store";
|
|
import router from "@/router";
|
|
import 'bootstrap/js/dist/collapse'
|
|
export default {
|
|
name: "TheNavbar",
|
|
components: { },
|
|
data() {
|
|
return {
|
|
visible: false
|
|
}
|
|
},
|
|
computed: {
|
|
isAuthenticated() {
|
|
return this.$store.getters.isAuthenticated;
|
|
}
|
|
},
|
|
methods: {
|
|
logout () {
|
|
store.dispatch('logout')
|
|
router.push({name: 'login'})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.nav-link {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|