本文主要讲述如何在vue中使用路由判断简单实现登陆的的拦截。
如何实现
首先在定义路由的时候就需要多添加一个自定义字段requireAuth
,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。
path: '/Info',
meta: {
requireAuth: true
},
component: resolve => require(['../pages/InfoPage.vue'], resolve)
定义完路由,main.js中利用vue-router
提供的钩子函数beforeEach()
对路由进行判断。
localstorage是在登陆后用来存储信息的,具体可以看之后登录的代码
//登录拦截
router.beforeEach((to,from,next)=>{
if (to.meta.requireAuth) {//requireAuth若为true则该路由需要判断是否登录
if (localStorage.userName) {//判断当前的userName数据是否存在
next();
}
else {
next({//返回登录页面
path: '/',
query: {redirect: to.fullPath}
})
}
}
else {
next();
}
})
登陆页面的简单实现,如果用户登陆,就把用户信息存到localstorage中,在前置的路由守卫中通过判断localstorage中是否有用户信息,实现登陆拦截功能
<template>
<div class="login-wrap">
<div class="ms-title">music 后台管理登录</div>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm">登录</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import {mixin} from "../mixins/index";
import {getLoginStatus} from "../api/index";
export default {
mixins:[mixin],
data(){
return {
ruleForm:{
username: "",
password: ""
},
rules:{
name:[
{required:true,message:"请输入用户名",trigger:"blur"}
],
password:[
{required:true,message:"请输入密码",trigger:"blur"}
]
}
}
},
methods:{
submitForm(){
let params = new URLSearchParams();
params.append("name",this.ruleForm.username);
params.append("password",this.ruleForm.password);
getLoginStatus(params)
.then((res) =>{
if(res.state == 200){
localStorage.setItem('userName',this.ruleForm.username);
this.$router.push("/Info");
this.notify("登录成功","success");
//存储用户登录信息
}else{
this.notify("登录失败","error");
}
});
}
}
}
</script>
到这一步,已经可以完成拦截跳转到登录页面的功能了
退出登录时的操作:移除localStorage中的值,跳转到登录的页面即可