Vuejs Role based login with different authorization - vue.js

Question

I am new to vue js and I am working on a simple project about role based login and listing report. In my design, there are two type of user: HAuser and supplier. How should I redirect different user to their corresponding page and authorize them with different access right?
login component:
<template>
<div class="auth-inner">
<h3>{{ userType }} {{ $t('Login') }}</h3>
<form v-on:submit.prevent="onSubmit">
<div class="form-group">
<label>{{ $t('username') }}</label>
<input v-model="loginForm.username" type="username" class="form-control" :placeholder="$t('username')" />
</div>
<div class="form-group">
<label>{{ $t('password') }}</label>
<input v-model="loginForm.password" type="password" class="form-control" :placeholder="$t('password')" />
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary" type="submit">{{ $t('Login') }}</button>
<vue-recaptcha
ref="recaptcha"
#verify="onCaptchaVerified"
#expired="onCaptchaExpired"
sitekey="6LfCmnEhAAAAAIsEHJx8QXbUHIAvIsuuwQW4JGj_"
class="mt-3" />
</div>
<div v-if="showErrorMessage" class="recaptcha-error-message"><strong>{{ $t('recaptcha-error-message') }}</strong></div>
</form>
</div>
</template>
<script>
import { VueRecaptcha } from 'vue-recaptcha';
export default {
name: 'login',
props: ['userType'],
components: { VueRecaptcha },
data(){
return{
showErrorMessage: false,
recaptchaToken: '',
status: '',
sucessfulServerResponse: '',
serverError: '',
recaptchaVerified: false,
submitted: false,
loading: false,
returnUrl: '',
error: '',
loginForm: {
username: '',
password: '',
}
}
},
methods: {
onCaptchaVerified: function (recaptchaToken) {
this.showErrorMessage = false;
this.loginForm.recaptchaVerified = true;
this.recaptchaToken = recaptchaToken;
},
onCaptchaExpired: function () {
this.loginForm.recaptchaVerified = false;
this.$refs.recaptcha.reset();
if (!this.loginForm.recaptchaVerified) {
this.showErrorMessage = true;
return ; // prevent form from submitting
}
},
onSubmit () {
if (!this.loginForm.recaptchaVerified) {
this.showErrorMessage = true;
return ; // prevent form from submitting
}
}
}
}
</script>
<style>
.recaptcha-error-message {
color: red;
}
.auth-inner {
width: 450px;
margin:auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgba(34, 35, 58,0.2);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all .3s;
}
</style>
different user view:
HAuser:
<template>
<Login userType='HAuser'/>
</template>
<script>
import Login from '#/components/Login.vue';
export default {
components: {
Login
}
}
</script>
<style>
</style>
Supplier view:
<template>
<Login userType='Supplier' />
</template>
<script>
import Login from '#/components/Login.vue';
export default {
components: {
Login
},
}
</script>
<style>
</style>
report const
{
"reports": [
{ "type": "Supplier", "name": "Summary of Users Last Access Time" },
{ "type": "Supplier", "name": "Capital Budget Report - Grand Summary" },
{ "type": "HAuser", "name": "(Workflow) Report on Site Directions/Memo Status" },
{ "type": "HAuser", "name": "Yearly Budget Forecast Working Sheet by Project" },
{ "type": "HAuser", "name": "Report on SWD's Lotteries Fund Project Under Block" }
]
}

Answer 1

You would want to look into router-guards. You can use them to do some checks before routing further and if needed route the user elsewhere. So for example:
When your user logs in at that point you know the role. Then you route to the default page, but if you detect in the guard that the role should go to another page you redirect to that page instead of the default page.
https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
There are of course other options like creating a computed property on the login page that get the role from your pinia (vuex) store.. put a watcher on that computed property also in the login page and when it changes route to the correct page.