本篇博客主要介绍在Vue中如何进行用户登陆状态检查,即:
如果有更好的实现,欢迎各位评论区留言讨论。
某些页面既然登陆后才能访问,那么我们就可以在用户访问该受访问的页面的时候,检查其是否已经认证。这里主要是通过在vue-resource中添加请求拦截来来完成。
具体关键步骤:
router/index.js
import Router from 'vue-router'
import Login from '@/components/Login.vue'
import Goods from '@/components/Goods.vue'
import Vue from 'vue'
// 注册路由器
Vue.use(Router)
// 定义路由规则
const router = new Router({
routes: [{
path: '/',
name: 'goods',
component: Goods
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/goods',
name: 'goods',
component: Goods,
meta: {
requiresAuth: true// 标记需要登陆才能访问
}
}]
})
// 请求拦截器,过滤未登陆请求
router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta && route.meta.requiresAuth)) {
// 根据Cookie判断是否认证成功,后端如果判断非法就将cookie设置过期
var cookie = Vue.prototype.$cookies.get('miaosha_cookie')
if (cookie == null) {
// 这里会设置redirect参数
console.log(to.fullPath)
next({
path: '/login',
query: {redirect: to.fullPath}
})
} else {
next()
}
} else {
next()
}
})
export default router
希望读者牢记,这里的限制只能限制正常用户的访问,更加安全的细节主要在后台完成。
为什么要封装ajax请求,这里主要有两个原因:
下面介绍一下封装的时候的一些细节,需要注意的是,为了让请求携带Cookie,需要设置withCredentials为true。另外,在利用vue-router进行重定向时,设置登陆页面的地址,以及登陆完成后需要重定向的页面的地址。
export default {
install(Vue, options) {
// 封装GET请求方法
Vue.prototype.queryGet = function (url, params, successCallback, errorCallback) {
// 跨域携带cookie
Vue.http.get(url, { withCredentials: true }).then((response) => {
// 可以在这里判断ajax请求的code是否为95101、95102和95103,然后回到登录页
let code = response.data.code;
console.log(code)
if (code !== '95101' && code !== '95102' && code !== '95103') {
successCallback(response);
} else {
// 根据响应码,判断是否需要跳转到登录页
console.log(params.redirect)
this.$router.push({
path: '/login',
query: {redirect: params.redirect}
})
}
}, (error) => {
errorCallback(error);
});
}
// 封装POST请求方法,直接访问相对路径即可
Vue.prototype.ajaxPost = (url, params, successCallback, errorCallback) => {
Vue.http.interceptors.push((request, next) => {
// 跨域携带cookie
request.withCredentials = true;
next();
});
// 以Json格式提交数据
Vue.http.post(url, params, {emulateJSON: true}).then((response) => {
successCallback(response)
}, (error) => {
errorCallback(error)
})
}
}
}
为了演示如何使用,这里给出一个例子。
如图所示,我们需要在打开页面时,从数据库中加载商品的信息。界面是使用element UI做的,这里就不做具体介绍了,主要关注一下,这里是在mounted生命周期函数中使用get请求的方式向springboot网站后台请求数据。
goods.vue
<template>
<el-card>
<div slot="header" class="clearfix">
<span>商品列表</span>
</div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="id"
label="编号">
</el-table-column>
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
label="图片"
prop="imageUrl">
<template slot-scope="scope">
<img :src="scope.row.imageUrl" width="40" height="40" />
</template>
</el-table-column>
<el-table-column
prop="price"
label="价格">
</el-table-column>
<el-table-column
prop="stock"
label="库存">
</el-table-column>
<el-table-column
prop="note"
label="备注">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text">详情</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted() {
// 在页面加载完成后请求数据
this.queryGet('/goods', {redirect: '/goods'}, response => {
console.log(response.data.data)
this.tableData = response.data.data
}, e => {
alert('ok');
})
}
}
</script>