我需要验证用户名和密码才能进入仪表板，如果用户未登录，还需要重定向到登录页面

Question

<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。我真的不知道如何进行验证和重定向。如果用户未登录，它需要验证用户并重定向到登录页面。如果有人可以帮助我解决我的问题，我将不胜感激。我真的很想学习解决这个问题的方法。提前谢谢你。

Answer 1

我想向您推荐以下解决方案

我们可以有一个单独的用户名和密码登录页面
用户输入用户名和密码后，可以像上面那样调用api
成功登录后可以存储用户令牌（就像你一样）
每个路由都可以检查用户令牌是否过期。
为此使用内置路由器功能 router.beforeEach() click here
如果用户未登录或令牌过期（在用户进入您的应用程序的仪表板之前和之后），该代码将执行每条路由并重定向到登录页面

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

我需要验证用户名和密码才能进入仪表板，如果用户未登录，还需要重定向到登录页面

I need to validate the username and password to enter the dashboard and also redirect to the login page if user is not log in

node.js

validation

vue.js

redirect

vue-material

main.js

router.js