html密码验证 并跳转页面,vuejs 实现前后端分离登录验证和页面自动跳转
使用的技术点:
vue-router
axios
vuex
element-ui
qs
项目介绍:
这个项目是一个类似google相册功能的项目,目前实现的是图片特征提取,可以以图搜图,最终打造成一个智能相册。后台由go语言开发,图片特征提取由c++开发,前端使用vuejs实现完全前后端分离。
现在就开始我们的前段代码吧。这里我们都使用vue组件开发
实现登录
组件代码如下:
登 录
import axios from 'axios';
export default {
name: 'login',
data () {
return {
userInfo :{
userName : '',
password : '',
},
show : false,
}
},
methods : {
doLogin (){
if (this.userName == ''){
alert('用户名不能为空');
return false
}
if (this.password == ''){
alert('密码名不能为空');
return false
}
axios.post('/login',JSON.stringify(this.userInfo))
.then(res => {
console.log(res)
if(res.status == 200){
this.$store.commit('setToken',res.data);
localStorage.userName = this.userInfo.userName;
localStorage.token_expire = res.data.expire;
localStorage.token = res.data.token;
this.$notify({
title : '提示信息',
message : '登录成功',
type : 'success'
});
this.$router.push({path:'/'})
}else {
this.$notify({
title : '提示信息',
message : '账号或密码错误',
type : 'error'
});
}
})
.catch(err => {
console.log(err)
})
}
},
mounted (){
var wi=window.screen.width;
var hi=window.screen.height;
document.getElementById("bg").style.width=wi+"px";
document.getElementById("bg").style.height=hi+"px";
},
}
/*.bg {*/
/*!*background-color: aqua;*!*/
/*background-image: url("../assets/bj.jpg");*/
/*background-size:100% 100%*/
/*}*/
.login {
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 400px;
}
.login-btn {
background-color: whitesmoke;
}
.logo {
font-family: "DejaVu Sans Mono";
color: lightblue;
font-size: 50px;
}
这里先不对代码进行说明,我先把index的组件代码也一并贴上,稍后解析知识要点。
实现首页展示相册
代码如下:
Toggle navigation
{{title}}
- 退出
- 相册列表 (current)
{{list}} 删除
创建相册
上传照片到此相册
{{image.album}}
{{image.filename}}
下载
删除
import axios from 'axios';
import qs from 'qs';
import UploadImage from './UploadImage.vue';
import CreateAlbum from './CreateAlbum.vue';
export default {
name : 'index',
data () {
return {
Create : false,
show : false,
title : this.$store.state.title
}
},
components :{UploadImage,CreateAlbum},
computed : {
// 获取相册列表
albumsName (){
return this.$store.getters.getAlbumsName;
},
// 获取相册内的图片列表
images (){
return this.$store.getters.getImagesList;
}
},
mounted (){
axios.post('/auth/managealbum/get', JSON.stringify({username : localStorage.userName})).then(res => {
if (res.data.status == 0){
this.$store.commit('setAlbums',res.data.data)
}else {
this.$store.commit('setAlbums','您没有相册')
}
}).catch(err => {
})
},
methods : {
// 打开上传弹窗
uploadImage (){
this.show = true;
},
showCreate(){
this.Create = true;
},
// 获取选中的相册的图片列表
listImages (name){
this.$store.commit('setCurrentAlbum',name);
axios.post('/auth/download?page=1&size=10',qs.stringify({username :localStorage.userName,album:name})).then(res => {
if (res.data.status == 0){
if (res.data.data == null){
this.$notify({
title : '提示信息',
message : ' 相册是空的哦,上传一些照片吧',
type : 'error'
})
}else {
this.$store.commit('putImages',res.data.data);
}
}else {
this.$msgbox({
title : '提示信息',
message : '没有此相册',
})
}
}).catch(err => {
})
},
// 删除图片
deleteImage (image,album){
console.log(image);
axios.post('/auth/delete',qs.stringify({username : localStorage.userName,album : album,md5:image.split('/')[4]})).then(res => {
if (res.data.status == 0){
this.$notify({
title : '提示信息',
message : '删除成功',
type : 'success'
});
this.listImages(album);
}else {
this.$notify({
title : '提示信息',
message : '删除失败',
type : 'error'
})
}
}).catch(err => {
})
}
}
}
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
text-align: left;
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
.my-create {
float: left;
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
margin-top: -65px;
}
.main > span {
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 10%;
}
ok, 到这里。我们两个页面就完成了,中间使用了一些element-ui的组件,这个可以在element-ui官网查看如何使用,由于此项目还未完成,所以代码还没有整理,功能也没有完善。有想参与这个开源项目的可以加我QQ 343125118.下面我们就对我们的知识点进行解析。
登录验证
因为是完全的前后端分离项目,所以这里我们使用了jwt做认证,这样我们前端就需要发送账号密码到后端进行验证,验证通过后会返回给你一个token和一个token的过期时间,然后我们把token和token的过期时间存储在localStorage里面,方便后面请求需要登录的资源时使用,至于为什么存储在localStorage里面,自己可以百度原因。ok,我们来看看代码吧。
// 这里我们使用了axios 去发送一个post请求,
axios.post('/login',JSON.stringify(this.userInfo))
.then(res => {
console.log(res)
if(res.status == 200){
// 当后台返回代码里面显示登录成功之后我们将token进行保存
this.$store.commit('setToken',res.data);
localStorage.userName = this.userInfo.userName;
localStorage.token_expire = res.data.expire;
localStorage.token = res.data.token;
this.$notify({
title : '提示信息',
message : '登录成功',
type : 'success'
});
// 同事跳转到首页,这里使用vue-router实现
this.$router.push({path:'/'})
}else {
// 登录失败提示
this.$notify({
title : '提示信息',
message : '账号或密码错误',
type : 'error'
});
}
})
.catch(err => {
console.log(err)
})
}
细心的同学可能已经注意到上面我post请求的地址了,不是一个完整的api请求地址,这是怎么回事呢,这里我们是使用了axios的全局配置,代码在main.js里面,代码如下
axios.defaults.baseURL = 'http://xxxxxx.xxx:9990';
这里刚还说到了另外一个,就是实现登录后的自动跳转,当然,如果你没有登录是不能访问相册主页的,也就是index,所以这里我们来看一个vue-router的知识点,配置需要登录后才能访问的路由和全局路由钩子,由这两个东西就可以实现我们的登录自动跳转和验证需要登录的页面。
我们先看路由配置:
export default new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
name: 'index',
// 下面这个meta是重点,这里面配置requireAuth 为true,就是说必须登录的才能访问
meta : {
requireAuth: true,
},
component: Index
}
]
})
刚刚还说到全局路由钩子,我们先来看代码,这段代码同样是全局的,也就是说放在main.js ,里面注释进行说明
// 为什么传这三个参数,官网有详细介绍
router.beforeEach((to,from,next) => {
// 这里的meta就是我们刚刚在路由里面配置的meta
if(to.meta.requireAuth){
// 下面这个判断是自行实现到底是否有没有登录
if (store.getters.isLogin){
// 登录就继续
next();
}else {
// 没有登录跳转到登录页面,登录成功之后再返回到之前请求的页面
next({
path : '/login',
query : {redirect : to.fullPath}
})
}
}else {
// 不需要登录的,可以继续访问
next()
}
});
现在我们实现了登录验证和登录自动跳转之后,需要请求相册类容了。但相册是需要登录之后才能访问的。不过没关系,我们刚刚不是保存token到localStorage里面吗,把token传过去就可以认证是否登录了,怎么传过去呢,这里因为项目设计为除了登录注册之外的资源请求,都需要验证,所以我们使用axios的全局拦截器。在我们请求发出之前,我们统一加上这个token。同样是在main.js 里
直接看代码吧,:
axios.interceptors.request.use(function (config) {
if (localStorage.token) {
config.headers.Authorization = `token ${localStorage.token}`;
}
return config;
}, function (err) {
return Promise.reject(err);
});
标签: vue
顶一下
(0)
0%
踩一下
(0)
0%
html密码验证 并跳转页面,vuejs 实现前后端分离登录验证和页面自动跳转相关推荐
- vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建(四)(完)...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务 前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目 新建backend_parent. 为了 ...
- 前后端分离/前端模块化/传统页面和单页面
前后端分离讲解 1.从MVC到前后端分离 MVC:Model + View + Controller,即模型+视图+控制器,项目开发时分层会分为三层:控制层,业务层,持久层. 前后端分离:目前比较常用 ...
- 京东上千页面搭建基石——CMS前后端分离演进史
声明:本文来自京东张开涛的微信公众号(kaitao-1234567),授权CSDN转载,如需转载请联系作者. 作者:于林坤,2012年加入京东,网站移动研发部频道业务技术负责人,先后多次主导京东商城首 ...
- vue click事件_Vue.js---实现前后端分离架构中前端页面搭建(二)
[Vue.js实现前后端分离架构中前端页面搭建] 九.Vue的事件处理 Vue的事件都是使用 v-on:事件类型 进行绑定.也可以使用@事件类型进行操作.其中事件类型和之前学习jQuery中事件名称是 ...
- 若依前后端分离版(vue)中配置页面跳转的路由
场景 若依前后端分离版本地搭建开发环境并运行项目的教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在此基 ...
- Node — 第六天(前后端分离)及(身份验证)
综合应用服务端知识点搭建项目 下载安装所需的第三方模块 npm init -y npm i express cors mysql # express 用于搭建服务器 # cors 用于解决跨域 # m ...
- SSM+JWT实现前后端分离的token验证
SSM+JWT实现前后端分离的token验证 前言 什么是JWT 基于Token的验证流程 JWT的Token实现 后端部分 前端部分 测试 项目完整地址 前言 以前写的web项目都是没有前后端分离的 ...
- spring security 前后端分离 进行用户验证 权限登陆的实现代码(看不懂??直接cv)
目录 目录 前言: 一.所需依赖 二.application.properties 三.工具类 3.1ApplicationContextUtils 3.2JwtUtils 3.3ResponseRe ...
- 【sprintboot+vue】前后端分离模式下的登录验证码验证
[项目背景] 考虑登录时的验证安全,需要添加验证码验证,纯前端实现的验证码其实没有真正意义上做到安全验证的要求,简单一个网页爬虫就能获取到前端生成的验证码,所以应该由后台生成验证码,并由后台完成校验过 ...
最新文章
- Postgresql 日志收集
- 手机上有android,android-在不同智能手机上的Videoview行为(具有...
- 博为峰Java技术题 ——JavaSE Java 方法Ⅲ
- Fedora 18下 升级内核后VirtualBox不能正常使用的问题
- python与Excel的完美结合
- LeetCode 303. 区域和检索 - 数组不可变(前缀和)
- HTML学习笔记:让div在屏幕居中,图片在div里居中
- 纯文字极简风格平面海报,PSD分层模板!
- SQLite 不能加密?
- learn words by steps 8 英语单词
- 【Qt+ OpenGL】实现人体3D显示与控制
- VS高版本兼容XP系统
- 2021高考成绩查询数学和物理,2021高考成绩什么时候几点可以查
- stm32F407中arr与psc以及pwm之间的关系
- OneDrive彻底卸载
- async/await 记录
- java公路赛_为什么Java公路车总被黑?
- eclipse mars2 安装web插件
- 微信推出热搜排行榜,微博压力山大?
- 环境温度 和气温的区别,有区别吗
热门文章
- ISOLINUX: A bootloader for Linux using ISO 9660/El Torito CD-ROMs
- System-Level Registers and Data Structures in IA-32e Mode and 4-Level Paging
- 实时Linux内核调度器 | Real-Time Linux Kernel Scheduler
- Linux网络协议栈:用eBPF写TCP拥塞控制算法
- Libco是一个C/C++协程库,在微信服务中广泛使用
- ncurses其他特性:curs_set(),离开curses模式,ACS_扩展字符集,扩展库
- Python数字类型:数值运算操作符、数值运算函数、类型判断函数、类型转换函数
- vmware+centeros7安装JavaJDK
- java实战项目_我靠这份Java知识体系和6个大厂实战项目,拿到阿里年薪50W+offer
- mysql schema 同步_GitHub - naryn/mysql-schema-sync: mysql表结构自动同步工具