前言
- 如果你是前后端整合的项目,可以看之前写的博客:【Spring Boot】登录拦截器
- 前面相关博客:
(1)SpringBoot+MybatisPlus+Vue项目(一):登录验证
(2)SpringBoot+MybatisPlus+Vue项目(二):前端接受后端数据
前端登录拦截器
- 需求:在没有登录的情况,不能直接访问main页面,访问main页面的话,直接返回登录页面。
- 怎么解决?我需要一个全局的属性来代表登录状态,而
Vuex
是专门为Vue开发的状态管理方案。 - Vuex官网:https://vuex.vuejs.org/zh/
- 安装Vuex命令:
npm install vuex --save
- 配置vuex,在src下新建一个文件夹store,文件夹下新建一个index.js文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {
username: window.sessionStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).username
}
},
mutations: {
login (state, user) {
state.user = user
// 存储到session
window.sessionStorage.setItem('user', JSON.stringify(user))
}
}
})
- 在main.js引入上面的js,同时路由验证配置,利用钩子函数,进入路由前进行
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
axios.defaults.baseURL = 'http://localhost:8181/api';
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueAxios, axios);
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {// 判断跳转的路由是否需要登录
if (store.state.user.username) {// vuex.state判断user.username是否存在
next()// 已登录
} else {
next({
path: 'login',
query: {redirect: to.fullPath}// 将跳转的路由path作为参数
})
}
} else {
next()
}
}
)
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
- 在路由文件中main的路由需要添加:
meta: {
requireAuth: true,//表示进入这个路由需要登录
}
完整代码:
import Vue from 'vue'
//安装vue-router后导入进来
import VueRouter from 'vue-router'
//导入组件
import Main from '../components/Main'
import Login from '../components/Login'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
mode: 'history',
routes: [
{
//路由路径
path: '/main',
name: 'Main',
meta: {
requireAuth: true
},
//跳转的组件
component: Main
},
{
path: '/login',
name: 'Login',
component: Login
}
]
});
- 修改登录页面,后端登录验证通过后,给store/index.js下的user对象传值:
Login.vue
<template>
<div>
<el-form ref="loginForm" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="loginForm.username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="loginForm.password" />
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="login" >登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
loginForm: {
username: '',
password: ''
},
responseResult: []
}
},
methods: {
login () {
var _this = this;
console.log(_this.$store.state)
this.axios
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.data.code === 200) {
//这里是验证成功的地方,给user传值,传到mutations中
_this.$store.commit('login',this.loginForm);
var path = this.$route.query.redirect;
this.$router.push({
path: path ==='/' || path === undefined ? '/main': path
});
}
});
}
}
}
</script>
<style scoped>
.login-box{
border: 1px solid #DCDFE6;
width: 350px;
margin:180px auto;
padding:35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow:0 0 25px #909399;
}
.login-title{
text-align:center;
margin:0 auto 40px auto;
color:#303133;
}
</style>
- 测试,记得打开后端服务器进行登录验证