Vue+Express实现登录注销功能的实例代码


Posted in Javascript onMay 05, 2019
  • 对Vue全家桶有基本的认知.
  • 用有node环境
  • 了解express

一丶业务分析

1.什么情况下进行权限验证?

访问敏感接口

  • 前端向后端敏感接口发送ajax
  • 后端进行session验证,并返回信息
  • 前端axios拦截返回信息,根据返回信息进行操作

进行页面切换

  • 页面切换,触发vue-router的路由守卫
  • 路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口
  • 后端验证接口进行session验证,返回信息
  • 前端根据后端返回信息进行操作

2.前后端进行了怎么的交互?

登录

注销

Vue+Express实现登录注销功能的实例代码

二丶项目环境

基础环境( 有兴趣自己动手做一遍这个登录注册的,可进入github克隆基础环境 )

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

正式开发依赖

  • express-session(express中间件,用于生成session)

三丶项目开始前

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

项目目录:

创建components/route_list.vue进行页面跳转

<template>
  <div>
   <p><router-link :to="{name:'index'}">主页</router-link></p>
   <p><router-link :to="{name:'login'}">登录</router-link></p>
   <p><router-link :to="{name:'logout'}">注销</router-link></p>
   <p><router-link :to="{name:'me'}">个人信息</router-link></p>
   <p>登录状态:{{this.$store.state.me.login}}</p>
  </div>
 </template>

创建stores/me.js仓库,存放登录状态

import Vue from 'vue'
import router from '../router';
export default{
  namespaced:true,
  state:{
    login :false
  },
  mutations:{
    changeLogin(state,{result}){ 
      state.login = result;
    }
  },
  actions:{
    async checkMe({commit}){
      const result = await Vue.prototype.$http.get('/me').then(data=>data.data);
      if(!result){
        router.push({name:'login'})
        return
      }
      commit('changeLogin',{result})
    }
  }
}

views中 新建Login,Logout,Signin,me组件

路由信息写在router.js中

Vue+Express实现登录注销功能的实例代码

2.配置路由: 引入各个页面,进行路由跳转配置

后端配置express-session

//serve/app.js文件 express服务器 
const express = require('express')
//中间件--用于下发session
const session = require('express-session')
const app = express()

//使用express-session下发session
app.set('trust proxy', 1)
app.use(session({
 secret: 'keyboard cat',
 resave: false,
 saveUninitialized: true,
}))

四丶权限验证 - 敏感接口

1.主页Index.vue--访问敏感接口,展示敏感接口数据

<template>
  <div>
    //请求后台数据
    <Button @click="getTest">敏感接口</Button>
    //请求信息展示
    {{result}}
    //页面跳转组件
   <route_list></route_list>
  </div>
</template>

<script>
import route_list from '../components/route_list'
  export default {
    components:{
      route_list
    },
    data(){
      return{
        result:""
      }
    },
    methods:{
    //请求敏感接口
     async getTest(){
       this.result = await this.$http.get("/").then(res=>res.data)
     }
    }
  }
</script>

2.后端的敏感接口接收到请求,进行判断

app.get('/', function (req, res) {
 if(req.session.login){
  res.send("hello world")
 }else{
 res.send(403)
 }
})

3.axios--发送ajax后,对后端返回数据进行拦截,判断

import axios from 'axios';
import url from 'url';
import router from '../src/router'
//创建axios实例
var instance = axios.create({
  baseURL: '/api'
});

//拦截器
 instance.interceptors.response.use(
  function(response){
    return response;
  },function(error){
    //敏感接口.如果没有session跳转登录界面
    if(error.response.status==403){
      router.push({name:"login"})
    }
  }) 

export default instance;

如果返回结果为true,登录状态,就可以进行访问敏感接口了.

五丶权限验证 - 页面跳转

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

//路由守卫
  router.beforeEach((to,from,next)=>{
 if(to.name != 'login' && to.name != 'index'){
  store.dispatch('me/checkMe')
 }
  next()
})

2.store中checkme,当跳转敏感页面时进行验证

actions:{
    async checkMe({commit}){
      //请求/me接口,对登录信息进行判断,并保留状态
      const result = await Vue.prototype.$http.get('/me').then(data=>data.data);
      //返回值为false,跳转至login
      if(!result){
        router.push({name:'login'})
        return
      }
      commit('changeLogin',{result})
    }
  }

3.后端的检测登录接口接收到请求,进行判断

//验证是否登录
app.get('/me', function (req, res) { 
//判断session是否为true
 if(req.session.login){
  res.send(true)
 }else{
  res.send(false)
 }
})

如果返回结果为true,登录状态,就可以进行页面跳转了.

六丶登录

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

<template>
  <div>
<h1>登录</h1>
<Button @click="login">登录</Button>
<route_list></route_list>
  </div>
</template>

<script>
import route_list from '../components/route_list'
  export default {
    components:{
      route_list
    },
   methods:{
     async login(){
     //请求登录接口
      const result = await this.$http.get("/login").then(data=>data.data);
      //记录登录状态
      this.$store.commit('me/changeLogin',{result})
     }
    },
}
</script>

2.后端登录接口接收到请求,生成session

//登录接口,更改session状态
app.get('/login', function (req, res) { 
 req.session.login = true,
 res.send(true)
})

现在就是登录状态了

七丶注销

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

<template>
  <div>
    <h1>注销</h1>
<Button @click="login">注销</Button>
<route_list></route_list>
  </div>
</template>
<script>
import route_list from '../components/route_list'
  export default {
    components:{
      route_list
    },
  data(){
    return{
      
    }
  },
   methods:{
     async login(){
      const result = await this.$http.get("/logout").then(data=>data.data);
      this.$store.commit('me/changeLogin',{result})
     }
    },
    
}
</script>

2.后端注销接口接收到请求,更改session状态

//登录接口,更改session状态
app.get('/login', function (req, res) { 
 req.session.login = false,
 res.send(false)
})

现在就是注销状态了

总结

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

Javascript 相关文章推荐
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
Vue 递归多级菜单的实例代码
May 05 #Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 #Javascript
详解Vue调用手机相机和相册以及上传
May 05 #Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 #Javascript
Angular实现svg和png图片下载实现
May 05 #Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
node Buffer缓存区常见操作示例
May 04 #Javascript
You might like
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
JS简单获得节点元素的方法示例
2018/02/10 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
详解小白之KMP算法及python实现
2019/04/04 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
八一建军节营销活动方案
2014/08/31 职场文书
临时租车协议范本
2014/09/23 职场文书
单位实习鉴定评语
2015/01/04 职场文书
高考学习决心书
2015/02/04 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python