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”导入URL；从“”导入路由器./src/router//create axios实例varinstance=axios . create({ baseurl : '/API ' })；//interceptor instance . interceptors . response . use(function(response)){ return response；}，函数(错误){ //敏感接口。如果没有会话跳转登录界面如果(错误。response . status==403){ router . push({ 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)})现在就是注销状态了

总结

以上所述是小编给大家介绍的武埃快车实现登录注销功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！