How do I handle authentication roles and errors in Vue.js?

How do I handle authentication roles and errors in Vue.js?

In Vue.js, you can manage authentication roles by using route guards and Vuex for state management. You can also handle errors by implementing error handling in your API calls.

Can you give me an example of a route guard for role-based access?

Sure! You can create a route guard like this:

router.beforeEach((to, from, next) => {
  const userRole = store.state.user.role;
  if (to.meta.requiresAuth && userRole !== 'admin') {
    next({ name: 'Unauthorized' });
  } else {
    next();
  }
});

What about handling errors from API calls?

You can use try-catch blocks in your async functions. For example:

async fetchData() {
  try {
    const response = await axios.get('/api/data');
    this.data = response.data;
  } catch (error) {
    this.error = 'Failed to fetch data';
  }
}

How can I display error messages to users?

You can use a data property to store the error message and display it in your template like this:

<div v-if="error">{{ error }}</div>