Allow perk access without login and fix logout bug

frontend/src/apis/auth.api.js

@@ -16,6 +16,11 @@ const AUTH_HEADER = 'Authorization';
 
 export default class AuthApi {
 	static setAuthHeader(token) {
+		if (!token) {
+			Reflect.deleteProperty(Axios.defaults.headers.common, AUTH_HEADER);
+			return;
+		}
+
 		Axios.defaults.headers.common[AUTH_HEADER] = `Bearer ${token}`;
 	}
 

frontend/src/components/app.vue

@@ -45,6 +45,7 @@ export default {
 					{ icon: 'fas fa-sign-out-alt', text: 'Logout', to: { name: 'logout' } },
 				],
 				false: [
+					{ icon: 'fas fa-code-branch', text: 'Perk trees', to: { name: 'trees' } },
 					{ icon: 'fas fa-sign-in-alt', text: 'Login', to: { name: 'login' } },
 					{ icon: 'fas fa-user-plus ', text: 'Sign up', to: { name: 'signup' } },
 				],

frontend/src/components/perks.component.vue

@@ -49,8 +49,10 @@
 
 <script>
 import * as d3 from 'd3';
-import Sankey from 'd3.chart.sankey';
 import * as _ from 'lodash';
+import Sankey from 'd3.chart.sankey';
+
+import { mapGetters } from 'vuex';
 
 import PerkController from '../controllers/perk.controller';
 import UserController from '../controllers/user.controller';
@@ -86,7 +88,12 @@ export default {
 		};
 	},
 	computed: {
+		...mapGetters(['authStatus']),
 		canUnlock() {
+			if (!this.authStatus) {
+				return false;
+			}
+
 			const isLocked = _.indexOf(this.user.perks, this.selectedPerk.id);
 			if (isLocked !== -1) {
 				return false;
@@ -98,6 +105,10 @@ export default {
 			return requirement_ids.every((req) => this.user.perks.includes(req));
 		},
 		canLock() {
+			if (!this.authStatus) {
+				return false;
+			}
+
 			const dependencies = _.filter(this.graphData.links, { source: this.selectedPerk });
 			const dependency_ids = _.map(dependencies, 'target.id');
 			const isLocked = _.indexOf(this.user.perks, this.selectedPerk.id);
@@ -172,6 +183,9 @@ export default {
 		PerkController.getPerks(this.$route.params.tree).then((response) => {
 			this.graphData = response.data;
 			this.renderGraph(this.graphData);
+			if (!this.authStatus) {
+				return;
+			}
 			UserController.getUser().then((response) => {
 				this.user = response.data;
 				this.markUnlockedPerks();

frontend/src/controllers/auth.controller.js

@@ -57,7 +57,7 @@ export default class AuthController {
 	static logout() {
 		AuthController.clearLocalStorageToken();
 		store.commit('logout');
-		AuthApi.setAuthHeader('');
+		AuthApi.setAuthHeader(null);
 	}
 
 	static changePassword(data) {