vue登陆如何获取token,基于vue的token认证机制(完整版)
最近公司新启动了个项目，用的是某视频剪辑软件框架在做，下面这篇文章主要给大家介绍了关于某视频剪辑软件实现代币登录验证的相关资料，文中通过实例代码介绍的非常详细，需要的朋友可以参考下
目录
令牌可用于登录验证和权限管理。登录页-登录。某视频剪辑软件路由守卫- router/index.js封装爱可信添加请求拦截器在每次请求之前进行的操作家页面总结
token可用于登录验证和权限管理。
大致步骤分为：
前端登录，发布用户名和密码到后端。后端验证用户名和密码，若通过，生成一个代币返回给前端。前端拿到代币存储到本地存储管理，登录成功进入首页。之后前端每一次权限操作如跳转路由，都需要判断是否存在令牌，若不存在，跳转至登录页。前端之后的每一个对后端的请求都要在请求头上带上令牌，后端查看请求头是否有令牌，拿到代币检查是否过期，返回对应状态给前端。若代币已过期，清除代币信息，跳转至登录页。
登录页 -----Login.vue
模板
！-登录-
差异
埃尔容器
埃尔梅因
div class=box
埃尔格式
：模型=用户
:rules=rules
ref=用户
标签宽度= 100像素
class=demo-ruleForm
El-表单-项目标签=用户名prop=电子邮件
埃尔输入v-model=user.email/el输入
/El-表单-项目
El-表单-项目标签=密码prop=通过
埃尔-输入类型=密码五-模型=用户。密码/El-输入
/El-表单-项目
埃尔-表单-项目
El-button type= primary @ click= log in 登录/el-button
/El-表单-项目
/el格式
/div
/el-main
/El-容器
/div
/模板
脚本
从导入{ LoginPostData }././api/index //后端登录接口
导出默认值{
data() {
返回{
规则：{
电子邮件：[
{必需：真，消息： 请输入用户名，触发：模糊 },
{最少3分钟，最多20分钟，消息： 长度在3到20 个字符，触发：模糊 },
],
密码：[
{必需：真，消息： 请输入密码，触发：模糊 },
{最少：3,最多：5,消息： 长度在3到5个字符，触发：模糊 },
],
},
用户：{
电子邮件：,
密码：""
},
用户令牌：,//用于存储从后台获取的代币
};
},
方法：{
登录(){
//登录接口
loginpos数据(这个。用户。电子邮件，this.user.password)。然后((res)={
//将代币存到户令牌中
这个。用户令牌=资源数据。数据。代币
//将代币本地存储到回话中
localStorage.setItem(token ，this。用户令牌)；
//如果密码为200则跳转到新报告页面
if(res.data.code===200){
这个1000美元路由器。推送({ name:新报告 })
这个消息({
消息： 恭喜你，登录成功，
类型："成功"
});
}否则{
这个$消息。错误(参考数据。数据)；
}
})。接住(错误={
控制台。日志(错误)；
})
}
},
};
/脚本
路由守卫 ----- router/index.js
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
Vue.use(VueRouter)
常量路由=[
//登录页
{
路径："/",
名称：登录，
组件：()=导入(./views/Login/Login.vue )，
},
//首页
{
路径："/Home "，
姓名：家，
组件：()=导入(./views/Home/Home。vue’)，
儿童：[
//新建报表
{
路径："/Home/NewReport "，
名称：新报告，
组件：()=导入(./视图/主页/新报告。vue’)
},
]
},
]
const router=new VueRouter({
路线
})
//导航守卫
//使用路由器。每个之前注册一个全局前置守卫，判断用户是否登陆
router.beforeEach(收件人，发件人，下一个)={
//如果去往登录页则放行
if (to.path===/) {
next()；
}否则{
//从本地存储里获取代币
让token=本地存储。getitem( token )；
//判断代币是否为空如果为空则跳转到登录页如果有则放行
if (token===null token===) {
next({ path:/ })；
}否则{
next()；
}
}
});
导出默认路由器
封装axios 添加请求拦截器 在每次请求之前进行的操作
在请求头中添加令牌- api/request.js
//请求
从" axios "导入爱可信
//创建爱可信实例创建爱可信实例
const instance=axios.create({
baseURL: http://192.168.3.6:8082 ，//api的基本网址
withCredentials: false//跨域时使用凭证，默认带上饼干
//超时：2000,//请求超时设置请求超时时间
})
//添加请求拦截器，在请求头中加代币
实例。截击机。请求。使用(
配置={
//判断代币是否存在
如果(本地存储。getitem( token ){
//在请求头中添加代币
配置。标题。令牌=本地存储。getitem( token )；
}
返回配置；
},
错误={
返回承诺。拒绝(错误);
});
导出默认实例
注意：
鬼知道我当时为了这个找了多半天哭死
home页面
模板
差异
El-link icon= El-icon-switch-button @ click= tui Chu 退出登录/el-link
/div
/模板
脚本
导出默认值{
方法：{
//退出
退除(){
//退出登录，清空代币
本地存储。移除项目(“令牌”)；
这个1000美元路由器。推送({ name:登录 })；
},
},
};
/脚本
总结
到此这篇关于某视频剪辑软件实现代币登录验证的文章就介绍到这了，更多相关某视频剪辑软件令牌登录验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。