VUE路由守卫_权限验证
引言：
本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫；未登录时会限制访问某些页面（前台控制），与之前的Shiro不同；
@[toc]
1. 使用场景
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
- 首次登录的时，前端调后端的登录接口，发送输入框中的用户名和密码；
- 后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token（令牌相当于一个门牌，如返回对象）；
- 前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
- 前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
- 每次调后端接口，都要在请求头中加token
- 后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
- 如果前端拿到状态码为401，就清除token信息并跳转到登录页面（首页）
2. 登录页面实现
- 通过this.ruleForm2.name获取输入框的name值，将输入框中的name通过链接传入后台；
- 后台从数据库中查出对应的字段，返回状态码以及值；
- 通过response.data.data.age（没有密码字段用年龄代替）获取数据库的值，与输入框中的作对比，一致进行下一步；
- 在前端写入用户状态信息到localStorage中，localStorage.setItem("Authorer", response.data.data.name);
- 登录成功跳转主页否则跳转初始页；
<template>
<!-- 视图显示部分-->
<div>
<h2>登录页面</h2>
<div id="inputStyle" class="inputClass">
<el-form
:model="ruleForm2"
status-icon
:rules="rules2"
ref="ruleForm2"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="ruleForm2.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model.number="ruleForm2.code"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
<el-button type="text">
<router-link to="/">回到首页</router-link>
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
// 编写js行为
export default {
data() {
return {
ruleForm2: {
name: "",
pass: "",
code: "",
},
};
},
methods: {
submitForm(formName) {
this.$axios
.post("loginSys?name=" + this.ruleForm2.name)
.then((response) => {
if (response.data.statusCode == 200) {
console.log(response.data.data);
if (this.ruleForm2.pass == response.data.data.age) {
//在前端写入用户状态信息到localStorage中
localStorage.setItem('Authorer',response.data.data.name);
//登录成功
// 导航到后台主页
this.$router.push("/main"); //使用编程式动态路由
} else {
this.$router.push("/");
}
}
})
.catch((error)=>{
alert(error)
});
this.$message(this.ruleForm2.name);
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
.inputClass {
padding: 20px;
width: 300px;
height: 250px;
margin: 0 auto;
}
.Codename {
margin-right: 227px;
padding: 10px;
font-family: PingFang SC;
}
.name {
margin-left: -237px;
padding: 10px;
font-style: inherit;
}
</style>
3. 路由守卫
- 未登录时：对登录页面、初始页不拦截，其他页面拦截；
- 登录状态：可以访问任何页面
- 通过localStorage.getItem('Authorer')获取localStorage中的值，如果有值继续访问，没有则跳转登录界面；
重：
- var会将作用域放大全局，let只是局部的作用域
- mode: 'history'：加上访问时可以不要#，直接从后台获得没有缓冲，减轻前台的负荷；
import Vue from 'vue'
import Router from 'vue-router'
import IndexView from '@/view/index'
import MainView from '@/view/admin/main'
import LoginView from '@/view/login'
import WelcomeView from '@/view/admin/welcome'
import StudentView from '@/view/admin/student'
import StudentSex from '@/view/admin/studentSex'
import StudentSchool from '@/view/detailSchool'
Vue.use(Router)
const routes = [
{
//前台首页
path: '/',
name: 'IndexView',
component: IndexView
},
{
path: "/showdetail", component: StudentSchool },
{
//后台主页面
path: "/main",
component: MainView,
children: [
{
path: "/", component: WelcomeView },
{
path: "/showStudent", component: StudentView },
{
path: "/showsex", component: StudentSex },
]
},
{
//登录页
path: "/login",
component: LoginView,
}
]
const router = new Router({
//可以丢掉#，有#采用页面缓冲的方式，无#从后台得到
mode: 'history',
routes
})
//
router.beforeEach((to, from, next) => {
//打印来的路径和去的路径
console.log(to.path + " from:" + from.fullPath)
//对于登录页面不拦截
if (to.path === '/login' || to.path === '/showdetail' || to.path === '/') {
// 接下来的函数
next();
} else {
//var会将作用域放大，let只是局部的作用域
let username = localStorage.getItem('Authorer');
console.username;
//用户访问认证后页面时 必须校验用户信息是否存在，不存在去登陆页
if (username === null || username === '') {
next('/');
} else {
next();
}
}
});
export default router;
4. 在main.js中加入axios拦截
- 将Authorer中的信息写入头部信息Authorization中；
- 后台申请一个HttpServletRequest接收Authorization值，并进行判断；
//引用axios，设置基础的url
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8088/api'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
//如果用户信息存在，将用户状态写入request的headers中key为Authorization ；value为localStorage.getItem('Authorer')
if (localStorage.getItem('Authorer')) {
config.headers.Authorization = localStorage.getItem('Authorer');
}
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
