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


Posted in Javascript onMay 05, 2019

前提

  • 对Vue全家桶有基本的认知.
  • 用有node环境
  • 了解express
  • 另外本篇只是介绍登录状态的权限验证,以及登录,注销的前后端交互.具体流程(例如:前端布局,后端密码验证等).以后有时间再对这些边边角角进行补充

一丶业务分析

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

访问敏感接口

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

进行页面切换

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

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

  • 登录
  • 注销

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

 二丶项目环境

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

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

开发依赖

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

三丶项目开始前

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

项目目录:

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

创建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中

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)
})

现在就是注销状态了

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

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

源码:github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
原生js实现简单轮播图
Oct 26 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 #Javascript
浅谈Node 异步IO和事件循环
May 05 #Javascript
vue的列表交错过渡实现代码示例
May 05 #Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 #Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 #Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 #Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 #Javascript
You might like
php 缓存函数代码
2008/08/27 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python机器学习之神经网络(三)
2017/12/20 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
python求前n个阶乘的和实例
2020/04/02 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
广告学毕业生求职信
2014/01/30 职场文书
班级团队活动方案
2014/08/14 职场文书
教师见习报告范文
2014/11/03 职场文书
2014年减负工作总结
2014/12/10 职场文书
初中英语教学随笔
2015/08/15 职场文书