I have set up a store to utilize the User resource, which includes an array of roles. My goal is to search for a specific role within this array. I've attempted to use Array functions, but they are not compatible with PropType<T[]>.
import router from "@/router";
import axios from 'axios';
import { defineStore } from "pinia";
import { PropType } from "vue";
import { ApplicationConstants } from '../utils/Constants';
type Role = {
name: string;
}
export const useUserStore = defineStore('user', {
state: () => ({
currentUserId: Number,
currentUserUsername: String,
currentUserRoles: Array as PropType<Role[]>,
isLoggedIn: false
}),
getters: {
getCurrentUserId: (state) => state.currentUserId,
getCurrentUsername: (state) => state.currentUserUsername,
getCurrentUserRoles: (state) => state.currentUserRoles,
isUserLoggedIn: (state) => state.isLoggedIn,
// hasCurrentUserRole: (state) => { return (role: String | Role) ????}
},
actions: {
logIn(username: string, password: string) {
const authDTO = {
"username" : username,
"password" : password
}
const loginResponse = axios({
method: 'post',
url: ApplicationConstants.API_LOGIN_URL,
data: authDTO
}).then((loginResponse) => {
/** Set JWT access token in LocalStorage. */
const token = loginResponse.headers["access-token"];
localStorage.setItem("accessToken", token);
/** Set current user credentials. */
this.currentUserId = loginResponse.data.id;
this.currentUserUsername = loginResponse.data.username;
this.currentUserRoles = loginResponse.data.roles;
this.isLoggedIn = true;
/** Go to Home page. */
console.log("inside login in userstore");
router.push("/");
}).catch((error) => {
});
},
logOut() {
this.$reset();
this.isLoggedIn = false;
router.push("/login");
},
containsRole(roleName: String | Role) {
// how??
}
}
});
I am utilizing Vue3 alongside Composition API and TypeScript.