Vue Express实现登录状态权限验证的示例代码

前提

对Vue家族的水桶有一个基本的了解。理解节点环境下的表达。此外，本文只介绍了登录状态的授权验证，以及登录和注销的前端交互。具体流程(如：前端布局、后端密码验证等。).将来会有时间来补充这些业务分析

1.在什么情况下应该验证权限？

访问敏感接口

前端将ajax后端发送到后端敏感接口进行会话认证，并返回axios后端截获的信息，根据返回的信息进行页面切换

页面切换，触发vue-router的路由守护根据跳转地址进行验证，如果需要权限，发送ajax到后端认证接口进行会话认证，并返回信息。前端根据后端返回的信息进行操作。2.前端和后端是如何交互的？

登录和注销

二、项目环境

基础环境(如果有兴趣自己制作这个小穹顶，可以进入github克隆基础环境)

Vue(前端):vue vuex(存储状态)axios(发送和拦截ajax信息)vue-router(单页路由)Express(后端): express(后端服务器环境)开发依赖

三个项目开始前的快速会话(快速中间件，用于生成会话)

1.创建项目目录、配置路由和创建页面跳转组件

项目目录：

为页面跳转创建组件/route_list.vue

模板div P router-link : to=' { name : ' index ' } '主页/router-link/P router-link : to=' { name : ' log in ' } '登录/路由器-link/P router-link : to=' { name : ' log out ' } '注销/路由器-link/P router-link : to=' { name : ' me ' } '个人信息/路由器-link$商店

从“vue”导入Vue从“导入路由器”./router '；导出默认值{ namespaced:true，state:{ login :false }，对其进行必要的更改：{ changeLogin(state，{ result }){ state . log in=result；} }，actions : { async CheckMe({ commit }){ const result=wait Vue . prototype . $ http . get('/me ')。然后(数据=data . data)；if(！结果){路由器。push({ name : ' log in ' })return } commit(' change log in '，{result})}}在视图中创建新的登录、注销、登录、me组件

路由信息写在router.js中

2.配置路由：

介绍配置路由跳转的每一页

后端配置快速-会话

//serve/app . js file express server const express=require(' express ')//中间件-用于发出session const session=require(' express-session ')const app=express()//使用express-session发出sessionapp.set ('trust proxy '，1)app . Use(session({ secret : ' keyboard cat '，resave3360 false，saveuninitialized 3360 true，})四个授权验证敏感接口

1.主页Index.vue -访问敏感界面并显示敏感界面数据

模板div //请求背景数据Button @click='getTest '敏感界面/Button //请求信息呈现{{result}} //页面跳转组件route _ list/route _ list/div/templatescript import route _ list from './components/route _ list ' export default { components 3360 { route _ list }，data(){ return{ result:'' }，Methods:{ //请求敏感接口asyncgettest () {this。结果=意识到这一点。$ http.get ('/')。然后(res=res.data)}}}/script2。后端的敏感接口接收请求并做出判断

App。get ('/'，function (req，res) {if (req。session . log in){ RES . send(' hello world ')} else { RES . send(403)} })3。axios-发送ajax后，截取后端返回的数据并判断

从“axios”导入axios从" url "导入网址；从""导入路由器./src/路由器'//创建爱可信实例var实例=axios。create({ base URL : '/API ' })；//拦截器实例。拦截器。回应。use(function(response)){ return response；},函数（错误){ //敏感接口。如果没有会议跳转登录界面if(错误。回应。status==403){路由器。推送({ name : ' log in ' })})导出默认实例；如果返回结果为没错，登录状态，就可以进行访问敏感接口了。

五丶权限验证-页面跳转

1.路由守卫，对跳转页面进行监视

//路由守卫router.beforeEach((to，from，next)={ if(to.name！='login' to.name！=' index '){ store。dispatch(' me/CheckMe ')} next()})2。商店中检查我，当跳转敏感页面时进行验证

操作： { async CheckMe({ commit }){//请求/我接口，对登录信息进行判断，并保留状态const结果=wait Vue。原型。$ http。get(“/me”).然后（数据=数据。数据)；//返回值为假的，跳转至登录if(！结果){路由器。推送({ name : ' log in ' })返回}提交(' changeLogin '，{result}) } }3 .后端的检测登录接口接收到请求，进行判断

//验证是否登录app.get('/me '，函数(请求，决议){ //判断会议是否为如果(请求)为真。会话。登录){ RES . send(真)} else { RES . send(假)})如果返回结果为没错，登录状态，就可以进行页面跳转了。

六丶登录

1.登录页Login.vue -请求登录接口，登录成功后将信息保存到商店

模板divh1登录/h1Button @click='login '登录/button route _ list/route _ list/div/templatescriptimport route _ list from './components/route _ list '导出默认{ components 3360 { route _ list }，methods:{ async login(){ //请求登录接口常量结果=等待$http.get('/login ').然后（数据=数据。数据)；//记录登录状态这个$store.commit('me/changeLogin '，{result}) } }，}/script2 .后端登录接口接收到请求，生成会议

//登录接口，更改会议状态app.get('/login '，函数(req，res) { req.session.login=true，res.send(true)})现在就是登录状态了

七丶注销

1.登录页Logout.vue -请求注销接口，注销成功后将信息保存到商店

模板div h1注销/h1Button @click='login '注销/button route _ list/route _ list/div/templatescriptimport route _ list from './components/route _ list ' export default { components 3360 { route _ list }，data(){ return } }，methods : { async log in(){ const result=this wait .$ http。get('/注销')。然后（数据=数据。数据)；这个$store.commit('me/changeLogin '，{result}) } }，}/script2 .后端注销接口接收到请求，更改会议状态

//登录接口，更改会议状态app.get('/login '，函数(req，res) { req.session.login=false，res.send(false)})现在就是注销状态了

完成展示(gif，可能加载不出来):

源码：github

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。