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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
jquery foreach使用示例
Sep 12 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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的header和asp中的redirect比较
2006/10/09 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python模拟三级菜单效果
2017/09/11 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python清除函数占用的内存方法
2018/06/25 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
维德科技C#面试题笔试题
2015/12/09 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
法学院方阵解说词
2014/01/29 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
幼师小班个人总结
2015/02/12 职场文书
入党申请书格式
2019/06/20 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers