Tackling Authentication With Vue Using RESTful APIs

This tutorial demonstrates user authentication in a Vue.js Single Page Application (SPA) using Firebase's REST API, offering a robust alternative to Firebase's SDK. We'll build a login/signup system, implement an authentication guard, manage UI state based on authentication status, and enable automatic login upon page refresh.

Authentication is vital for many websites. This tutorial shows how to implement it in a Vue.js app, integrating with any backend (here, Firebase). SPAs handle authentication differently than traditional, page-reloading sites.

Our approach involves a user interface for login/signup. Submitted data is sent to the server for verification. Upon successful login, a token is received and used throughout the app to maintain the logged-in state and for server-side authorization.

The complete code is available on GitHub. You'll need to install Vuex, Vue Router, Axios, and set up a Firebase project with email/password authentication. Obtain your API key from Firebase project settings. We use the Firebase Auth REST API, not the SDK, to illustrate backend-agnostic authentication.

Signup/Login Implementation:

Instead of using axios directly in a script tag, we leverage Vuex actions within store.js for better state management. This ensures the entire app reflects authentication changes.

// store.js
actions: {
  signup ({commit}, authData) {
    axios.post('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]', {
      email: authData.email,
      password: authData.password,
      returnSecureToken: true
    })
    .then(res => {
      commit('authUser', { token: res.data.idToken, userId: res.data.localId });
      localStorage.setItem('token', res.data.idToken);
      localStorage.setItem('userId', res.data.localId);
      router.push("/dashboard");
    })
    .catch(error => console.error(error));
  },
  login ({commit}, authData) { // Similar structure to signup, using signIn endpoint
    // ...
  }
}

These actions are dispatched from components using methods like:

// Component method
methods: {
  onSubmit () {
    this.$store.dispatch('signup', { email: this.email, password: this.password });
  }
}

Vuex state stores authentication data:

// store.js
state: {
  idToken: null,
  userId: null,
  user: null
}

A mutation authUser updates the state:

// store.js
mutations: {
  authUser (state, userData) {
    state.idToken = userData.token;
    state.userId = userData.userId;
  }
}

Authentication Guard:

A route guard protects the /dashboard route:

// router.js
{
  path: '/dashboard',
  component: DashboardPage,
  beforeEnter (to, from, next) {
    if (store.state.idToken) { next(); } else { next('/signin'); }
  }
}

UI State Management:

A Vuex getter ifAuthenticated controls UI visibility:

// store.js
getters: {
  ifAuthenticated (state) {
    return state.idToken !== null;
  }
}

The header component uses this getter:

<template>
  <nav>
    <router-link v-if="$store.getters.ifAuthenticated" to="/dashboard">Dashboard</router-link>
    {/* ...other navigation items... */}
  </nav>
</template>

Logout:

A mutation clearAuth and action logout handle logout:

// store.js
mutations: {
  clearAuth (state) {
    state.idToken = null;
    state.userId = null;
  }
}
actions: {
  logout ({commit}) {
    commit('clearAuth');
    localStorage.removeItem('token');
    localStorage.removeItem('userId');
    router.replace('/');
  }
}

Auto-Login:

An action AutoLogin retrieves tokens from localStorage on app load:

// store.js
actions: {
  AutoLogin ({commit}) {
    const token = localStorage.getItem('token');
    if (token) {
      const userId = localStorage.getItem('userId');
      commit('authUser', { idToken: token, userId: userId });
    }
  }
}

This is dispatched in App.vue's created hook. Remember to use this demo responsibly and avoid using real credentials.

The above is the detailed content of Tackling Authentication With Vue Using RESTful APIs. For more information, please follow other related articles on the PHP Chinese website!