介绍 <李> <李> <李> <李> <李> , & lt; template>
& lt;才能div>
,,& lt; p> & lt; router-link :=皗名称:& # 39;指数# 39;},在主页& lt;/router-link> & lt;/p>
,,& lt; p> & lt; router-link :=皗名称:& # 39;登录# 39;}“祝辞登录& lt;/router-link> & lt;/p>
,,& lt; p> & lt; router-link :=皗名称:& # 39;注销# 39;}“祝辞注销& lt;/router-link> & lt;/p>
,,& lt; p> & lt; router-link :=皗名称:& # 39;我# 39;},在个人信息& lt;/router-link> & lt;/p>
,,& lt; p>登录状态:{{。$ store.state.me.login}} & lt;/p>
& lt;才能/div>
,& lt;/template> import Vue 得到& # 39;vue # 39;
import router 得到& # 39;. ./路由器# 39;;
export 默认{
名称空间:真的,才能
状态:{才能
,,,login :假的
,,},
突变才能:{
,,,changeLogin(状态,结果{}){,
,,,,,state.login =,结果;
,,,}
,,},
动作:{才能
,,,async checkMe({提交}){
,,,,,const result =, await Vue.prototype。美元http.get(& # 39;/我# 39;),然后(data=https://www.yisu.com/zixun/> data.data);
如果结果(!){
router.push ({name:“登录”})
返回
}
提交(changeLogin,{结果})
}
}
} ,//服务/app.js文件,快递服务器,
const express =,要求(& # 39;表达# 39;)//中间件——用于下发会话
const session =,要求(& # 39;express-session& # 39;)
const app =,表达()//使用express-session下发会话
app.set (& # 39; trust 代理# 39;,,1)
app.use(会话({
,秘密:& # 39;keyboard 猫# 39;
,重新保存:假的,
,saveUninitialized:没错,
})) & lt; template>
& lt;才能div>
,,,//请求后台数据
,,,& lt; Button @click=癵etTest"在敏感接口& lt;/Button>
,,,//请求信息展示
,,,{{结果}}
,,,//页面跳转组件
,,& lt; route_list> & lt;/route_list>
& lt;才能/div>
& lt;/template>
& lt; script>
import route_list 得到& # 39;. ./组件/route_list& # 39;
export 才能;default {
,,,组件:{
,,,,route_list
,,,},
,,,的数据(){
,,,,,返回{
,,,,,,,结果:““
,,,,,}
,,,},
,,,方法:{
,,,//请求敏感接口
,,,,async 得到(){
,,,,,,this.result http.get美元=await 这。(“/?(res=祝辞res.data)
,,,,}
,,,}
,,}
& lt;/script>
本篇文章为大家展示了怎么在Vue中使用表达实现一个登录状态权限验证,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>一丶业务分析
<强> 1。什么情况下进行权限验证吗?
访问敏感接口
前端向后端敏感接口发送ajax
<李>后端进行会话验证,并返回信息
<李>前端axios拦截返回信息,根据返回信息进行操作
进行页面切换
页面切换,触发vue-router的路由守卫
<李>路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口
<李>后端验证接口进行会话验证,返回信息
<李>前端根据后端返回信息进行操作
<强> 2。前后端进行了怎么的交互?
登录
<李>注销
<强>,二丶项目环境
基础环境(有兴趣自己动手做一遍这个小圆顶的,可进入github克隆基础环境)
Vue(前端):Vue vuex(存储状态)axios(发送,拦截ajax信息)vue-router(单页面路由)
<李>表达(后端):表达(后端服务器环境)
开发依赖
express-session(表达中间件,用于生成会话)
<强>三丶项目开始前 <强>
<强> 1。创建项目目录,配置路由,创建页面跳转组件
项目目录:
创建/route_list组件。vue进行页面跳转
创建店/我。js仓库,存放登录状态
视图中新建登录,注销,Signin,我组件
路由信息写在router.js中
<强> 2。配置路由:
引入各个页面,进行路由跳转配置
后端配置express-session
<强>四丶权限验证——敏感接口
1。主索引页。vue——访问敏感接口,展示敏感接口数据
