本篇文章为大家展示了怎么在Vue中使用Express实现一个登录状态权限验证,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
一丶业务分析
1.什么情况下进行权限验证?
访问敏感接口
前端向后端敏感接口发送ajax
后端进行session验证,并返回信息
前端axios拦截返回信息,根据返回信息进行操作
进行页面切换
页面切换,触发vue-router的路由守卫
路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口
后端验证接口进行session验证,返回信息
前端根据后端返回信息进行操作
2.前后端进行了怎么的交互?
登录
注销
二丶项目环境
基础环境(有兴趣自己动手做一遍这个小dome的,可进入github克隆基础环境)
Vue(前端):vue vuex(存储状态) axios(发送,拦截ajax信息) vue-router(单页面路由)
Express(后端): express(后端服务器环境)
开发依赖
express-session(express中间件,用于生成session)
三丶项目开始前
1.创建项目目录,配置路由,创建页面跳转组件
项目目录:
创建components/route_list.vue进行页面跳转
主页
登录
注销
个人信息 登录状态:{{this.$store.state.me.login}}
创建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--访问敏感接口,展示敏感接口数据
//请求后台数据 //请求信息展示 {{result}} //页面跳转组件
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
登录
2.后端登录接口接收到请求,生成session
//登录接口,更改session状态 app.get('/login', function (req, res) { req.session.login = true, res.send(true) })
现在就是登录状态了
七丶注销
1.登录页Logout.vue - 请求注销接口,注销成功后将信息保存到store
注销
2.后端注销接口接收到请求,更改session状态
//登录接口,更改session状态 app.get('/login', function (req, res) { req.session.login = false, res.send(false) })
上述内容就是怎么在Vue中使用Express实现一个登录状态权限验证,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。