Мне нужно подтвердить имя пользователя и пароль, чтобы войти в панель управления, а также перенаправить на страницу входа, если пользователь не вошел в систему - PullRequest
Новая
       26

Мне нужно подтвердить имя пользователя и пароль, чтобы войти в панель управления, а также перенаправить на страницу входа, если пользователь не вошел в систему

0 голосов
/ 20 октября 2019 

<script>
import { SlideYDownTransition } from "vue2-transitions";
import { LoginCard } from "@/components";

export default {
  components: {
    LoginCard,
    SlideYDownTransition
  },
  data() {
    return {
      username: "",
      password: ""
    };
  },
  created: function() {
     this.checkCurrentLogin()
  },
  updated () {
  if (!localStorage.token && this.$route.path !== '/login') {
    this.$router.replace(this.$route.path)
  }
},
  method: {
    checkCurrentLogin () {
    if (localStorage.token) {
      this.$router.replace(this.$route.query || '/login')
    }
  },
    login: function() {
      this.axios
        .post("", { user: this.username, password: this.password })
        .then(request => this.loginSuccessful(request))
        .catch(() => this.loginFailed());
    },

    loginSuccessful(req) {
      if (!req.data.token) {
        this.loginFailed();
        return;
      } 
      localStorage.token = req.data.token;
      this.error = false;

      this.$router.replace(this.$route.query.redirect || "/dashboard");
    },

    loginFailed() {
      this.error = "Login failed!";
      delete localStorage.token;
    },
     login: function() {
      this.$router.push("dashboard");
    },
  }
};
</script>
<style lang="scss" scoped>
.md-card .md-card-actions {
  border: none;
  width: 350px;
 
}
</style>
<template>
  <form class="login" @submit.prevent="login">
    <md-card>
      <md-card-header class="md-card-header-icon md-card-header-green" align-center>
        <div class="card-icon">
          <md-icon>contacts</md-icon>
        </div>
        <h4 class="title">Login</h4>
      </md-card-header>

      <md-card-content>
        <label>User name :</label>
        <md-field>
      <md-input required v-model="username" type="text" placeholder="Snoopy" />
        </md-field>
      <br />
    
      <label>Password :</label>
      <md-field>
      <md-input required v-model="password" type="password" placeholder="Password" />
      </md-field>
      </md-card-content>

      <md-card-actions>
      <md-button type="submit" to="/dashboard" @click="login()">Login</md-button> 
      </md-card-actions>
    </md-card>
  </form>
</template>

Привет, я все еще учусь использовать vue js. Я действительно не знаю, как сделать проверку и перенаправление. Он должен подтвердить пользователя, а также перенаправить на страницу входа, если пользователь не входит в систему. Я ценю, если кто-нибудь может помочь мне решить мою проблему. Мне бы очень хотелось узнать решение этой проблемы. Заранее спасибо.

1 Ответ

1 голос
/ 20 октября 2019

Я хотел бы предложить вам следующее решение

  1. У нас может быть отдельная страница входа для имени пользователя и пароля
  2. после того, как пользователь вставит имя пользователя и пароль, можно выполнить вызов API какВы сделали выше

  3. после успешного входа в систему можно сохранить токен пользователя (как вы это сделали)

  4. На каждом маршруте вы можете проверить, истек ли срок действия токена пользователя или нет.

  5. Для этого используйте встроенную функцию маршрутизатора router.beforeEach () нажмите здесь
  6. , чтобы код выполнял каждый маршрути может выполнить перенаправление на страницу входа в систему, если пользователь не вошел в систему или срок действия токена истек (до того, как пользователь войдет в панель управления вашего приложения и после этого тоже)

main.js 

import router from './router'

new Vue({
  router, render: h => h(App)
}).$mount('#app')

router.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',      
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach(async (to, from, next) => {
  const isAuthenticated = true; // add valid check here
  try {  
    if (isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  } catch (e) {
    console.error('router : ', e);
  }
});

export default router
...