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;已安装密码重置插件。公共镜像创建的弹性云服务器默认已安装一键重置密码插件。私有镜像创建的云…

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

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

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…

ruby mysql dbi_Ruby MySQL DBI实例

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

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学习图谱:学习到困惑的时候可以参考的图谱

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

zabbixdocker里的mysql_docker zabbix安装部署(数据库和web及zabbix服务都用docker版)

一、docker zabbix相关镜像下载分别docker pull (mysql:5.7 、zabbix/zabbix-agent 、zabbix/zabbix-server-mysql 、zabbix/zabbix-web-nginx-mysql)[rootald8 ~]# docker imagesREPOSITORY TAG IMAGE ID CREATED SIZEmysql 5.7 98455b9624a9 12 days ago 372MBzabbix/zabbix…

mysql 物理结构设计_数据库的物理结构设计指的是什么?

Log Goup ID&#xff0c;可能会配置多个redo组&#xff0c;每个组对应一个id&#xff0c;当前都是0&#xff0c;占用4字节Start LSN&#xff0c;这个redo log文件开始日志的lsn&#xff0c;占用8字节Log File Number&#xff0c;总是为0&#xff0c;占用4字节Created By&#x…

java script中==和===_Java Script 中 ==(Equal) 和 === (Identity Equal) 的区别和比较算法逻辑...

判断两个变量是否相等在任何编程语言中都是非常重要的功能。JavaScript 提供了 和 两种判断两个变量是否相等的运算符&#xff0c;但我们开始学习的时候 JavaScript 的时候&#xff0c;就被一遍又一遍的告知&#xff1a; 要求变量的类型和值均相等&#xff0c;才能返回true。…

java android 数组_Android开发基础之Java 数组

Java 数组数组对于每一门编程语言来说都是重要的数据结构之一&#xff0c;当然不同语言对数组的实现及处理也不尽相同。Java 语言中提供的数组是用来存储固定大小的同类型元素。你可以声明一个数组变量&#xff0c;如 numbers[100] 来代替直接声明 100 个独立变量 number0&…

bellman ford java_Java C 实现Bellman-ford算法

package com.cn.tree;public class MyException extends Exception {private static final long serialVersionUID 1L;public MyException(String str) {super(str);}public MyException() {}}package com.cn.graph;import com.cn.tree.MyException;/*** 很明显时间复杂度为O(…

c#模拟看板控件_在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件...

在很多时候&#xff0c;我们做一些非常规化的界面的时候&#xff0c;往往需要创建一些用户控件&#xff0c;在其中绘制好一些基础的界面块&#xff0c;作为后续重复使用的一个单元&#xff0c;用户控件同时也可以封装处理一些简单的逻辑。在开发Winform各种类型项目&#xff0c…

java jdbc 详解_JDBC概述及详解各个对象

JDBC(Java DataBase Connectivity)详解一.概念&#xff1a;JDBC是一种可执行SQL语句的JavaAPI&#xff0c;Java数据库链接&#xff0c;Java语言操做数据库mysql二.本质&#xff1a;JDBC是一种可用于执行SQL语句的Java API&#xff0c;由一些Java语言编写的类和页面组成。各个数…

java空心字木塔_我国七个千年古塔:第四个空心没有塔顶,最后一个是木塔无钉无铆...

1、崇圣寺三塔&#xff0c;云南大理&#xff0c;公元824—839年崇圣寺三塔是一个三塔三阁组成的建筑群&#xff0c;最大的主塔又名千寻塔。是中国现存层数最多的古佛塔&#xff0c;拥有16层。崇圣寺三塔历经30多次地震不倒&#xff0c;极其顽强。2、大雁塔&#xff0c;陕西西安…

java8 ie_Java8语法糖之Lambda表达式_Hudie.的博客-CSDN博客

原文作者&#xff1a;编程一只蝶原文标题&#xff1a;Java8语法糖之Lambda表达式发布时间&#xff1a;2021-02-16 13:08:40一、Lambda表达式简介Lambda表达式&#xff0c;是Java8的一个新特性&#xff0c;也是Java8中最值得学习的新特性之一。(另一个新特性是流式编程。)Lambda…

python中的event_Python event

最新项目游戏感用于SteelSeries GameSense 3.8.x的Python库安装这个包有两个不同的版本。一个支持普通的同步函数调用&#xff0c;另一个支持python的异步功能。要安装同步版本&#xff0c;请运 ...2021-03-02已阅读: n次此模块验证事件模块中的电话号码&#xff0c;就像base_p…