Mercurial > gemma
changeset 158:992e17912405
feat: Improve login against real db
In order to log into our real db, we need to consume
the new JSON document consuming experies, username, roles, etc.
Token is stored securly in browser session.
Other data is stored in vue store.
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Tue, 03 Jul 2018 16:18:29 +0200 |
| parents | a85c44438d48 |
| children | 3d9341f6da4e |
| files | client/src/components/Sidebar.vue client/src/stores/user.js client/src/views/Login.vue |
| diffstat | 3 files changed, 25 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue Tue Jul 03 11:43:55 2018 +0200 +++ b/client/src/components/Sidebar.vue Tue Jul 03 16:18:29 2018 +0200 @@ -6,13 +6,19 @@ <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav> + <div class="userinfo"> + {{ userinfo }} + </div> </div> </template> <script> +import { mapGetters } from "vuex"; + export default { name: "sidebar", computed: { + ...mapGetters("user", ["userinfo"]), sidebarStyle() { return { sidebarcollapsed: this.collapsed,
--- a/client/src/stores/user.js Tue Jul 03 11:43:55 2018 +0200 +++ b/client/src/stores/user.js Tue Jul 03 16:18:29 2018 +0200 @@ -3,16 +3,26 @@ const User = { namespaced: true, state: { - authenticated: false + user: "", + authenticated: false, + expires: null, + roles: [] }, getters: { authenticated: state => { return state.authenticated; + }, + userinfo: state => { + return state.user; } }, mutations: { - auth_success: (state, token) => { + auth_success: (state, data) => { state.authenticated = true; + const { token, user, expires, roles } = data; + state.user = user; + state.expires = expires; + state.roles = roles; sessionStorage.setItem("token", token); }, auth_failure: state => { @@ -23,10 +33,9 @@ actions: { login({ commit }, user) { return new Promise((resolve, reject) => { - HTTP.post("/token", user) + HTTP.get("/token", { params: user }) .then(response => { - let token = response.data; - commit("auth_success", token); + commit("auth_success", response.data); resolve(response); }) .catch(error => {
--- a/client/src/views/Login.vue Tue Jul 03 11:43:55 2018 +0200 +++ b/client/src/views/Login.vue Tue Jul 03 16:18:29 2018 +0200 @@ -12,10 +12,10 @@ <span class="loginerror"><translate>Login failed</translate></span> </div> <div class="input-group mb-3 emailgroup"> - <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus> + <input type="text" v-model="user" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus> </div> <div class="input-group mb-3 passwordgroup"> - <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required> + <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder='passwordLabel' required> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2" @click="showPassword"><i :class="eyeIcon"></i></span> </div> @@ -103,7 +103,7 @@ name: "login", data() { return { - username: "", + user: "", password: "", submitted: false, loginFailed: false, @@ -141,9 +141,9 @@ methods: { login() { this.submitted = true; - const { username, password } = this; + const { user, password } = this; this.$store - .dispatch("user/login", { username, password }) + .dispatch("user/login", { user, password }) .then(() => { this.loginFailed = false; this.$router.push("/");