wegame每次登陆都要滑动验证_Vue项目中实现用户登录及token验证

a4b45897c94cebbd376775a552bd51c8.png

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

vue-cli搭建一个项目,简单说明前端要做的事:

067be9f1dfa204c443faa0e9339f17cd.png
  • 一、调登录接口成功,在回调函数中将token存储到localStorage和vuex中

login.vue

<template> <div> <input type="text" v-model="loginForm.username" placeholder="用户名"/> <input type="text" v-model="loginForm.password" placeholder="密码"/> <button @click="login">登录</button> </div></template> <script>import { mapMutations } from 'vuex';export default { data () { return { loginForm: { username: '', password: '' } }; },  methods: { ...mapMutations(['changeLogin']), login () { let _this = this; if (this.loginForm.username === '' || this.loginForm.password === '') { alert('账号或密码不能为空'); } else { this.axios({ method: 'post', url: '/user/login', data: _this.loginForm }).then(res => { console.log(res.data); _this.userToken = 'Bearer ' + res.data.data.body.token; // 将用户token保存到vuex中 _this.changeLogin({ Authorization: _this.userToken }); _this.$router.push('/home'); alert('登陆成功'); }).catch(error => { alert('账号或密码错误'); console.log(error); }); } } }};</script>

5a45931421eeca7c19c415cf6d1b0555.png

store文件夹下的index.js

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); const store = new Vuex.Store({  state: { // 存储token Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '' },  mutations: { // 修改token,并将token存入localStorage changeLogin (state, user) { state.Authorization = user.Authorization; localStorage.setItem('Authorization', user.Authorization); } }}); export default store;
  • 二、路由导航守卫

router文件夹下的index.js

import Vue from 'vue';import Router from 'vue-router';import login from '@/components/login';import home from '@/components/home'; Vue.use(Router); const router = new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: login }, { path: '/home', name: 'home', component: home } ]}); // 导航守卫// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆router.beforeEach((to, from, next) => { if (to.path === '/login') { next(); } else { let token = localStorage.getItem('Authorization');  if (token === 'null' || token === '') { next('/login'); } else { next(); } }}); export default router;
  • 三、请求头加token
// 添加请求拦截器,在请求头中加tokenaxios.interceptors.request.use( config => { if (localStorage.getItem('Authorization')) { config.headers.Authorization = localStorage.getItem('Authorization'); }  return config; }, error => { return Promise.reject(error); });

四、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

 localStorage.removeItem('Authorization'); this.$router.push('/login');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/526725.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云服务器 性能监控软件,云监控 - 云应用监控 - ManageEngine Applications Manager

云监控什么是云监控?尽管许多组织仍然依赖于在自托管的数据中心中存储数据的本地方法&#xff0c;但在业务组织中采用云服务的情况已经逐渐增多。自然&#xff0c;这导致了一些云监控工具的出现。无论您使用的是公共、私有还是混合环境&#xff0c;对应用程序性能具有端到端可…

mysql导入dat文件_MySql导入和抽取大数量级文件数据

一、情况介绍需要处理的文件是一个3.41G的csv格式文件&#xff0c;现在需要把它导入数据库&#xff0c;进行后续处理和分析。二、导入数据该文件数据量庞大&#xff0c;无法用excel或者editplus之类普通软件打开&#xff0c;于是借用了pandas的方法查看了表的结构&#xff1a;方…

服务器操作系统与安装步骤,服务器操作系统与安装步骤

服务器操作系统与安装步骤 内容精选换一换如果在创建弹性云服务器时未设置密码&#xff0c;或密码丢失、过期&#xff0c;可以参见本节操作重置密码。密码丢失或过期前&#xff0c;已安装密码重置插件。公共镜像创建的弹性云服务器默认已安装一键重置密码插件。私有镜像创建的云…

python jsonpath-rw_Python使用jsonpath-rw模块处理Json对象操作示例

本文实例讲述了Python使用jsonpath-rw模块处理Json对象操作。分享给大家供大家参考&#xff0c;具体如下&#xff1a;这两天在写一个爬虫&#xff0c;需要从网站返回的json数据提取一些有用的数据。向url发起请求&#xff0c;返回的是response&#xff0c;在python3中&#xff…

文件服务器mfs,分布式文件系统MFS(moosefs)实现存储共享

这种架构除了性能问题而外&#xff0c;还存在单点故障&#xff0c;一旦这个NFS服务器发生故障&#xff0c;所有靠共享提供数据的应用就不再可用&#xff0c;尽管用rsync方式同步数据到另外一个服务器上做nfs服务的备份&#xff0c;但这对提高整个系统的性能毫无帮助。基于这样一…

as mysql with 嵌套_MySQL_MySQL的嵌套查询,MySQl从4.11版后已经完全支持嵌 - phpStudy

MySQL的嵌套查询MySQl从4.11版后已经完全支持嵌套查询了&#xff0c;那么下面举些简单的嵌套查询的例子吧(源程序来自MySQL User Manual)&#xff1a;1. SELECT语句的子查询语法: SELECT ... FROM (subquery) AS name ...先创建一个表:CREATE TABLE t1 (s1 INT, s2 CHAR(5)…

mysql 1215_mysql执行带外键的sql文件时出现mysql ERROR 1215 (HY000): Cannot add foreign key constraint的解决...

ERROR 1215 (HY000): Cannot add foreign key constraint最近在建表时遇到了这个错误&#xff0c;然后找了下找到了解决办法&#xff0c;记录下&#xff1a;本来是要建两张表&#xff1a;出现下面的提示&#xff1a;然后开始上网查&#xff0c;有的说是用的引擎不同的原因&…

mysql里面可以用正则吗_Mysql中使用正则表达式

最近在《MYSQL必知必会》这本书中读到在SQL中使用正则表达式&#xff0c;以前是学过数据库也学过正则表达式&#xff0c;但是不知道原来他们可以一起使用&#xff0c;这里做下记录。首先是Mysql使用正则表达式的语法&#xff1a;SELECT ... FROM ... WHERE ... REGEXP ...(这…

mysql数据库的备份和恢复的常用方法_MySQL数据库备份与恢复方法(转)

常有新手问我该怎么备份数据库&#xff0c;下面介绍3种备份数据库的方法&#xff1a;MySQL中的每一个数据库和数据表分别对应文件系统中的目录和其下的文件。在Linux下数据库文件的存放目录一般为/var/lib/mysql。在Windows下这个目录视MySQL的安装路径而定&#xff0c;DiaHost…

mysql sum函数返回类型_MySQL的sum函数返回的门类

MySQL的sum函数返回的类型 今天项目切换数据库时&#xff0c;出错 访问数据库的代码大概是这样&#xff1a; String sql "select sum(number) as sumNumberOfOneDay from tableName";ListMap rows getJdbcTemplate().queryForList(sql);for (Map row : rows) {Some…

mysql 联合索引 性能_mysql:联合索引及优化

命名规则&#xff1a;表名_字段名1、需要加索引的字段&#xff0c;要在where条件中2、数据量少的字段不需要加索引3、如果where条件中是OR关系&#xff0c;加索引不起作用4、符合最左原则尽量不要用or&#xff0c;如果可以用union代替&#xff0c;则一定要代替https://segmentf…

以下不属于mysql列类型的是什么意思_下列 ________ 类型不是 MySQL 中常用的的数据类型。_学小易找答案...

【简答题】工作区跳线的制作 请依据EIA568国际标准,制作一根直通线(即两端都是EIA568B线芯排布规律) 做好网线后,请拍照上传作业。【单选题】UNIQUE 惟一索引的作用是 ( ) :【简答题】根据实地观察结果,分别从树性、枝干、叶片、花、果实(如果有)等器官指出以下三组果树在植株形…

ruby mysql dbi_Ruby MySQL DBI实例

本次章节将介绍如何用Ruby来访问数据库。类似的Perl DBI模块为Ruby脚本的Ruby DBI模块提供了一种数据库(这里用MySQL讲解)独立的接口。DBI代表数据库无关的接口为RubyDBI提供的Ruby代码和底层数据库之间的抽象层&#xff0c;允许你真的很容易切换数据库实现。它定义了一套方法&…

api demo 京东商品详情_jd-demo

一个仿京东的网站&#xff1a;后端使用java&#xff0c;基本架构&#xff1a;springMVC spring mybatis&#xff1b;前端技术&#xff1a;HtmlCSSJQueryReactSass...后台接口说明&#xff1a;####1.统计用户、商品、订单数量/manage/statistic/base_count.dorequest无respons…

mysql linux 迁移mac_Mac和Linux之间传输数据,并导出mysql数据到本地

从 本地 复制到 远程复制文件&#xff1a;命令格式&#xff1a;scp local_file remote_usernameremote_ip:remote_folder或者scp local_file remote_usernameremote_ip:remote_file或者scp local_file remote_ip:remote_folder或者scp local_file remote_ip:remote_file第1,2个…

mysql与tomcat_mysql数据库与tomcat服务器的一些细节问题

java程序使用数据库的方法1.使用jndi数据源核心代码&#xff1a;initCtx new InitialContext()DataSource ds;ds (DataSource) initCtx.lookup("java:comp/env/jdbc/mysql1");conn ds.getConnection();----------配置服务器信息web项目web.xml中配置MySQL DB Conn…

python出现严重错误_安装出现严重错误!大神帮忙分析下原因

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼查看日志结果如下&#xff1a;(看不懂。。。)[2874:052C][2018-07-05T22:18:14]e000: Error 0x80070643: Failed to install MSI package.[2874:052C][2018-07-05T22:18:14]e000: Error 0x80070643: Failed to configure per-user …

信息安全学习路线图_Python学习图谱:学习到困惑的时候可以参考的图谱

很多同学都想学习Python&#xff0c;最近就连地产大佬潘石屹都要学Python。刚刚开始学习Python的同学来说&#xff0c;不知道从哪里下手&#xff0c;学习起来比较困惑&#xff0c;没有找到一个好的学习方法&#xff0c;没有高手带路&#xff0c;没有人督促你学习&#xff0c;或…

如何更新mysql数据库字段_如何使用MySQL一个表中的字段更新另一个表中字段

1&#xff0c;修改1列update student s, city cset s.city_name c.namewhere s.city_code c.code;2&#xff0c;修改多个列update a, bset a.titleb.title, a.nameb.namewhere a.idb.id•子查询update student s set city_name (select name from city where code s.city_c…

mysql到mysqli转变表_利用mysql和mysqli取得mysql的所有数据库和库中的所有表

/*** mysqli op mysql demo*//***公用函数*//***功能&#xff1a;列出一个数据库的所有表*param$dbname*param$con*/functionlist_tables($dbname,$con){mysql_select_db($dbname,$con)or die("选择数据库失败!");$res mysql_query("SHOW TABLES");$table…