node.js - 我需要验证用户名和密码才能进入仪表板,如果用户未登录,我还需要重定向到登录页面
问题描述
<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。我真的不知道如何进行验证和重定向。如果用户未登录,它需要验证用户并重定向到登录页面。如果有人可以帮助我解决我的问题,我将不胜感激。我真的很想学习解决这个问题的方法。先感谢您。
解决方案
我想建议你下面的解决方案
- 我们可以有一个单独的用户名和密码登录页面
- 用户插入用户名和密码后,可以像上面那样进行 api 调用
成功登录后可以存储用户令牌(就像你做的那样)
您可以检查用户令牌是否过期的每条路线。
- 为此使用内置的路由器功能router.beforeEach() 点击这里
- 该代码将执行每条路由,并且可以在用户未登录或令牌过期时重定向到登录页面(在用户进入应用程序的仪表板之前和之后)
main.js
import router from './router'
new Vue({
router, render: h => h(App)
}).$mount('#app')
路由器.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
推荐阅读
- azure - 在部署 Web 应用程序期间使用 azure devops 提要
- database - Flutter 应用和网站连接到同一个数据库
- javascript - 如何从javascript中的数组中删除某些匹配条件的元素?
- regex - PhpStorm Ideolog 正则表达式
- c# - 如何在 Xamarin Forms 中使用 Datawedge 启用/禁用条形码扫描仪
- python - 为什么 A[:,i] 与 A[:][i] 不同?
- mysql - 不使用 first() 的 Spark SQL vs Normal SQL 查询错误
- r - 在 R 中,如何将一列拆分为两列?谢谢
- python - 根据属性的值在 Django 项目中使用信号删除通知
- python - 可以使用元组索引找到列表的长度吗?