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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
微信小程序实现发送模板消息功能示例【通过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/03/24 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue--vuex详解
2019/04/15 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
python pillow库的基础使用教程
2021/01/13 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
保密工作整改情况汇报
2014/11/06 职场文书
爱心募捐感谢信
2015/01/22 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Python日志模块logging用法
2022/06/05 Python