After deploying my Vue2 project to Firebase hosting server, visitors are required to log in to access the other pages. The issue is that once a user successfully logs in, they are redirected to the next page but it appears blank.
Below is what the firebase.json file looks like:
{
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"storage": {
"rules": "storage.rules"
},
...
The path and URL changed correctly after deployment, however, only the login page is visible and not the other pages even post-login redirection. Do you spot any issues with this setup?
This is how my route.js file is structured:
...
export const routes = [{
path: '*',
redirect: '/login'
},{
...
}];
I also have a main.js file which controls routing based on authentication status:
...
const router = new VueRouter({
mode: 'history',
routes
});
router.beforeEach((to, from, next) => {
...
});
Additionally, here's an excerpt from the code in the Login.vue file:
...
<script>
import {...}
export default {
name: 'Login',
methods: {
async onSubmit(event) {
...
}
}
}
</script>
The app was deployed using npm run build followed by firebase deploy --only hosting. Despite this process, some pages remain inaccessible post-login. Any suggestions?
Lastly, here's an overview of the folder structure:
hq
dist
css
img
js
index.html
...
public
img
index.html
...
src
assets
components
locales
views
...
fireebase.json
package.json
...
Appreciate any insights or assistance. Thank you!