Here you will find how to use JWT authentication provided by our template.
We provided JWT service for quickly getting started with authentication. It is also extendable so you can write your own JWT without removing ours or modify our JWT config.
You can find our core JWT files in
src/@core/auth/jwt. Let's understand what each file has to offer:
- uswJwt.js: This file holds composition function
useJwtfunction accepts axios instance as first parameter and jwt config object as second parameter. It return instance of JWT service.
- jwtDefaultConfig.js: This file has default config we used in our template. Still, you can modify by passing your own config object in
- jwtService.js: This is actual JWT service which provides login, register, etc method for working with JWT.
Do consider checking what our provided JWT service is doing (Understanding its class methods and etc) to understand the flow of our current authentication system.
JwtService class which have several method and properties which we will explore below. You will get instance of this class when you use
useJwt composition function.
# Axios response interceptor
We added axios response interceptor to auto renew JWT token once it get expired. We tried our best to provide this interceptor usable by almost all people. Still if you have any suggestions for us we are always ready for it. We love to improve our template and serve you better. 😇
Class methods as self explanatory just by names so it doesn't require any explanation. Just one thing you have to look for is constructor of
JwtService. We commented the code so you can understand it better.
# Using JWT Service
We provided JWT service with our best efforts but it is not universal JWT service which will work no matter what. You might need to update the code according to your API response or your Authentication system flow.
e.g. Current Authentication and Access Control expects your response contains userData, accessToken, etc.
Above mentioned JWT files are core files so please don't update them, you might break something if we provide the update. So, you can use composition function we provided to use JWT. You can find your JWT files in
useJwt.js file instead of passing blank object you can pass your own config to configure JWT service. You can refer to default config to check which options are available to override.
We haven't provided config for storing user data because it is up to you how to save user data.
You will also find auth utils in
src/auth/utils.js file. Those utils are well commented and self explanatory as well.
Unlike previous version, we didn't provide login and register actions for providing flexibility in writing your own logic for login, register etc. You can find user ACL update and other post login/register/other code in their respective page's SFC file. e.g. To check post login process/logic check
# Overriding Jwt Service
# Making authentication API calls
We provided Authentication with best of our knowledge. As different project have different requirement you can't assume that our current Authentication implementation will work in all of them (e.g. Current authentication flow expects refresh token flow).
There might be case where you have to update the code because your backend API sends you different response then frontend expects. In this case you first have to know what frontend expects in response.
Next, you need to update the API response you sent from your backend Or if you can't modify response sent via API then you need to update the frontend code.