Hei,
Jeg holder fortiden på med å knytte opp firebase authentication mot min app. Appen skal være helt låst med mindre en autorisert bruker logger seg inn, med andre ord det eneste som skal være synlig for alle er logg inn siden(/login). Etter at påloggingen blir godkjent, blir brukeren videreført til hjem siden(/home) derfra kan en velge å gå til for eks. /inbox eller andre sider. Dette har jeg fått til og det fungerer veldig bra, men jeg er veldig usikker på om denne måten jeg har rute disse låste sidene på er egentlig en bra måte (og ikke minst en sikker måte).
Jeg bruker Vue Router til å knytte sammen sidene i router.js. Under hver av de låste sidene har jeg spesifisert med
meta: {requiresAuth: true}
og helt nede bruker jeg router.beforeEach firebase funksjon for å spesifisere hvilken side som skal vises for uautoriserte brukarene og hvor blir en sendt videre etter en suksessfull autorisasjon.
router.js:
Kode
import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Inbox from '@/views/Inbox.vue'
import Team from '@/views/Team.vue'
import Settings from '@/views/Settings.vue'
import NotFound from '@/views/NotFound.vue'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/inbox',
name: 'Inbox',
component: Inbox,
meta: {
requiresAuth: true
}
},
{
path: '/team',
name: 'Team',
component: Team,
meta: {
requiresAuth: true
}
},
{
path: '/settings',
name: 'Settings',
component: Settings,
meta: {
requiresAuth: true
}
},
{
path: '*',
name: 'NotFound',
component: NotFound
}
]
})
router.beforeEach((to, from, next) => {
let currentUser = firebase.auth().currentUser
let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
if (requiresAuth && !currentUser) next('login')
else if (!requiresAuth && currentUser) next('home')
else next()
})
export default router
Home.vue:
Kode
<template>
<v-container fill-height>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-flex class="text-xs-center">
<h1>Velkommen,</h1>
<p>{{name}}</p>
</v-flex>
<v-layout v-layout align-center justify-center column fill-height>
<v-btn color="red" @click="logout">Logg ut</v-btn>
<v-spacer></v-spacer>
<v-btn color="green" @click="goToInbox">Inbox</v-btn>
<v-btn color="green" @click="goToTeam">Team</v-btn>
<v-btn color="green" @click="goToSettings">Settings</v-btn>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import firebase from "firebase";
export default {
data() {
return {
name: firebase.auth().currentUser.email
};
},
methods: {
logout() {
firebase
.auth()
.signOut()
.then(() => {
this.$router.replace("login");
});
},
goToInbox() {
this.$router.replace("/inbox");
},
goToTeam() {
this.$router.replace("/team");
},
goToSettings() {
this.$router.replace("/settings");
}
}
};
</script>
<style lang="scss">
h1 {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
p {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
</style>
I Home.vue (/home) filen har jeg laget en ruting funksjon til hver av sidene, når brukeren trykker på knappen(linken) blir han sendt videre til den siden. Det er egentlig det jeg er mest usikker på, er dette en god måte å gjøre det på ?