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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
javascript函数库-集合框架
Apr 27 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
vue打包之后生成一个配置文件修改接口的方法
Dec 09 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
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
js 异步处理进度条
2010/04/01 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript实现拖放效果
2015/12/16 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
nodejs初始化init的示例代码
2018/10/10 NodeJs
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Flask框架各种常见装饰器示例
2018/07/17 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
总经理秘书工作职责
2013/12/26 职场文书
离婚财产处理协议书
2014/09/30 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
个人培训总结
2015/03/05 职场文书
加班费申请报告
2015/05/15 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
如何使用flask将模型部署为服务
2021/05/13 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫