Moves drupal sdk to centralized util and adds redirect if not logged in

example/vue2/README.md

@@ -2,9 +2,12 @@
 
 ## Project setup
 ```
+cp .env.example .env
 yarn install
 ```
 
+Change `VUE_APP_BASE_URL` in your .env file to your Drupal installation URL.
+
 ### Compiles and hot-reloads for development
 ```
 yarn serve

example/vue2/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue2",
+  "name": "vue2-example",
   "version": "0.1.0",
   "private": true,
   "scripts": {

example/vue2/src/components/LoginForm.vue

@@ -1,6 +1,5 @@
 <template>
-	<button v-if="user.loggedIn" @click="logout">Log out</button>
-	<form v-else @submit.prevent="submit" class="mt-8 space-y-6" action="#" method="POST">
+	<form @submit.prevent="submit" class="mt-8 space-y-6" action="#" method="POST">
 		<input type="hidden" name="remember" value="true" />
 		<div class="rounded-md shadow-sm -space-y-px">
 			<div>
@@ -130,49 +129,38 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { Drupal, DrupalAuth } from 'drupal-js-sdk';
+import drupal from '../utils/drupal-sdk';
 
 export default Vue.extend({
+	name: 'LoginForm',
 	data() {
 		return {
 			user: {
 				username: '',
-				password: '',
-				loggedIn: false
+				password: ''
 			},
 			inProgress: false,
-			error: false,
-			auth: {} as DrupalAuth
+			error: false
 		};
 	},
 	methods: {
 		submit() {
 			this.inProgress = true;
-			this.auth
+			drupal
 				.login(this.user.username, this.user.password)
 				.then((response) => {
-					this.inProgress = false;
-					this.user.username = response.data.current_user.name;
-					this.user.loggedIn = true;
+					this.user.username = '';
 					this.user.password = '';
+					localStorage.setItem('username', response.data.current_user.name);
+					this.$router.push('/');
 				})
 				.catch((err) => {
 					this.error = err.response.data.message;
+				})
+				.finally(() => {
+					this.inProgress = false;
 				});
-		},
-		logout() {
-			this.auth.logout().then(() => {
-				this.user.loggedIn = false;
-				this.user.username = '';
-				this.user.password = '';
-			});
 		}
-	},
-	mounted() {
-		const drupal = new Drupal().initialize({
-			baseURL: process.env.VUE_APP_BASE_URL
-		});
-		this.auth = new DrupalAuth(drupal);
 	}
 });
 </script>

example/vue2/src/shims-vue.d.ts

@@ -1,4 +1,12 @@
+import VueRouter from 'vue-router';
+
 declare module '*.vue' {
 	import Vue from 'vue';
 	export default Vue;
 }
+
+declare module 'vue/types/vue' {
+	interface Vue {
+		$router: VueRouter;
+	}
+}

example/vue2/src/utils/drupal-sdk.ts

@@ -0,0 +1,7 @@
+import { Drupal, DrupalAuth } from 'drupal-js-sdk';
+
+const drupal = new Drupal().initialize({
+	baseURL: process.env.VUE_APP_BASE_URL || ''
+});
+
+export default new DrupalAuth(drupal);

example/vue2/src/views/Home.vue

@@ -1,15 +1,49 @@
 <template>
 	<div class="home">
 		<nav>
-			<router-link to="/login">Login</router-link>
+			<button v-if="user.loggedIn" @click="logout">Log out</button>
+			<router-link v-else to="/login">Login</router-link>
 		</nav>
+		<p>
+			You are logged in as {{ user.name }}
+		</p>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import drupal from '../utils/drupal-sdk';
 
 export default Vue.extend({
-	name: 'Home'
+	name: 'Home',
+	data() {
+		return {
+			user: {
+				name: '',
+				loggedIn: false
+			}
+		};
+	},
+	methods: {
+		async checkAuthStatus() {
+			const status = drupal.loginStatus();
+			this.user.loggedIn = Boolean(status);
+			this.user.name = localStorage.getItem('username') || '';
+		},
+		logout() {
+			drupal.logout().then(() => {
+				this.user.loggedIn = false;
+				localStorage.removeItem('username');
+				this.$router.push('/login');
+			});
+		}
+	},
+	async mounted() {
+		console.log(drupal);
+		await this.checkAuthStatus();
+		if (!this.user.loggedIn) {
+			this.$router.push('/login');
+		}
+	}
 });
 </script>