vue获取token实现token登录的示例代码

使用token做登录验证的思路大致如下:

1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。

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

3、前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中。(本次项目用的是vue框架,使用了vuex全局状态管理)

4、前端每次路由跳转,就判断localStorage中是否有token,如果没有就跳转登录页面,如果有就跳转到相应的页面。

5、分装一公用的请求接口方法,每次请求调用后端接口,都在请求头中带上token

6、后端判断请求头中是否有token,如果有token就拿到token并且验证token,验证成功返回数据,验证失败(例如token过期),就返回给前端一个状态码,一般是401,请求头中没有token也返回401 (第6步是后端做,前端只要根据后端返回都状态做相应都处理就行了)

7、如果前端拿到后台返回都状态码是401,就清除token并跳转登录页面。

实际步骤

1、在项目中store中都store.js文件里添加保存和删除token都全局方法。

//  store.js 中都mutation中增加添加和删除token的方法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {     // 全局管理的数据存储
	 isLogin:'0',
	 ser:null,
	 token:localStorage.getItem('token') ? localStorage.getItem('token'):'',   // token
};
export default new Vuex.Store({
	state,
	getters:{    // 监听数据变化的
		getStorage(state){   // 获取本地存储的登录信息
	      if(!state.token){
	        state.token =JSON.parse(localStorage.getItem(key))
	      }
	      return state.token
	    }
	},
	mutations:{
		$_setToken(state, value) { // 设置存储token
	        state.token = value;
	        localStorage.setItem('token', value);
	    },
	    $_removeStorage(state, value){  // 删除token
		      localStorage.removeItem('token');
	    },
	}
})

2、在登录页面(login.vue)中登录方法调用接口成功后把token存储在本地存储中localStorage。

// login.vue页面
methods:{
	loginFun(){
		this.$api.post('请求的后端接口链接',{
				data:{
					userId:this.user,   // 登录名
		            userPwd:this.psw,  // 登录密码
				}
		}).then((res) => {
			if(res.data.status == 200){
				var userInfo = res.data.data;
				this.$store.commit('$_setToken', userInfo.token);
				Toast({ message: '登录成功', type: 'success',duration: 1500});   // ui弹窗提示
                 this.$router.push({ name:'homePage' });  // 跳转到首页
			} else {
				Toast({ message: res.data.message, duration: 1500});   // ui弹窗提示
			}
		})
	}
}

3、在main.js中添加请求拦截器,并在请求头中添加token。

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'

import PublicFun from './utils/publicFun'    // 公用方法

import './mintUi'   // 按需引入mintUi 组建   如需配置到mintUi.js去配置
import '@/assets/mui/css/mui.css' // mui.css样式

/*引入axios插件*/
import axios from 'axios'
Vue.prototype.$http = axios;

// 全局路由构造函数,判断是否登录和要跳转到页面
router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
    if(window.localStorage.token && window.localStorage.isLogin === '1'){
      next()
    } else if (to.path !== '/login') {
      let token = window.localStorage.token;
      if (token === 'null' || token === '' || token === undefined){
          next({path: '/login'})
          Toast({ message: '检测到您还未登录,请登录后操作!', duration: 1500 })
      }
    } else {
      next()
    }
  } else {   // 不需要登录
    next()
  }
})

// 配置公共url
Axios.defaults.baseURL = "http://www.sinya.online/api/"
//添加请求拦截器
axios.interceptors.request.use(
  config =>{
    if(store.state.token){
      config.headers.common['token'] =store.state.token
    }
    return config;
  },
  error =>{
    //对请求错误做什么
    return Promise.reject(error);
  })

//http reponse响应拦截器
axios.interceptors.response.use(
  response =>{
    return response;
  },
  error=>{
    if(error.response){
      switch(error.response.status){
        case 401:
          localStorage.removeItem('token');
          router.replace({
            path: '/views/login',
            query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
          })
      }
    }
  })

Vue.prototype.$publicFun = PublicFun   // 挂载全局公用方法
Vue.prototype.$apps = Apps    //  app.js公用方法
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

看到token

退出的时候

returnFun(){   // 退出登录
	 MessageBox.confirm(this.lang.logoutTip).then(action => {
	     this.$store.commit('$_removeStorage');    // 清除登录信息
	     this.$router.push({
	         name:'login'
	     });
	     Toast({message:this.lang.logoutSuccess, duration: 1500});
	 }).catch(()=>{})
} 

到此这篇关于vue获取token实现token登录的示例代码的文章就介绍到这了,更多相关vue token登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现token过期自动跳转到登录页面

    这几天项目提测,测试给我提了个bug,说token过期,路由应该自动跳转到登陆页面,让用户重新登录.先说下一些前置条件, 1:我公司的token时效在生产环境设置为一个小时,当token过期,所有接口都直接返回 2:每次路由跳转都会对token进行判断,设置了一个全局的beforeEach钩子函数,如果token存在就跳到你所需要的页面,否则 就直接跳转到登录页面,让用户登录重新存取token 接口返回的信息 { code:10009, msg:'token过期', data:null } 全局

  • Vue实现用户登录及token验证

    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3.前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面 4.前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面 5.每次调后端接口,都要在请求头中加token 6.后端判断请求头中有无

  • vue登录注册及token验证实现代码

    在大多数网站中,实现登录注册都是结合本地存储cookie.localStorage和请求时验证token等技术.而对于某些功能页面,会尝试获取本地存储中的token进行判断,存在则可进入,否则跳到登录页或弹出登录框. 而在vue单页中,我们可以通过监控route对象,从中匹配信息去决定是否验证token,然后定义后续行为. 具体实现代码如下: 1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息 // router.js import Vue from 'v

  • Vue项目中token验证登录(前端部分)

    本文实例为大家分享了Vue项目中token验证登录的具体代码,供大家参考,具体内容如下 1.前言 最近在做毕业设计,我是做后端的,前端并不是很懂,看vue这个框架看了近两个礼拜才有点入门的感觉,所以这篇文章写的可能不怎么好,仅作记录,有什么不对或不足的地方欢迎大神指出. 2.问题 做一个登录界面,我选择的是用token进行验证登录,我用的前端框架是Vue.js 和 element-ui,如何在vue 中使用token进行验证登录 3.思考 1.利用token进行验证登录,用户进行登录操作时,后台

  • VUE实现token登录验证

    本文实例为大家分享了VUE实现token登录验证的具体代码,供大家参考,具体内容如下 实现这个登录功能的过程真是一波三折,中途出现了bug,整了两三天才解决了问题,心力交瘁,简直一个头两个大,感觉自己的毅力和耐心又提升了一个层次ORZ 好在最终在同学的帮助下解决了bug,不过我又再次感受到了作为一个菜鸟的浅薄,大佬的问题屡次触及到我的知识盲区......现在详细地记录一下实现token登录验证的步骤,以防以后再犯错 1.封装store对token的操作方法 首先在src目录下创建一个store文

  • vue获取token实现token登录的示例代码

    使用token做登录验证的思路大致如下: 1.在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端. 2.后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值. 3.前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中.(本次项目用的是vue框架,使用了vuex全局状态管理) 4.前端每次路由跳转,就判断localStorage中是否有token,如果没有就跳转登录页面,如果有就跳转到相应的页面. 5.分装一公用的请求接口方法,每

  • SpringBoot实现token登录的示例代码

    为什么引入token机制? 在进行登录验证时,我们需要session或cookie会话进行验证,客户端包括浏览器.app.微信小程序.公众号,只有浏览器有session和cookie机制,当我们脱离浏览器用app等向服务端发请求就没有session和cookie机制,这时我们就需要使用token令牌进行登录验证. 代码实现 先建个util包,并创建TokenUtil类用于生成token TokenUtil类代码 package com.qcby.util; import com.qcby.ent

  • vue获取form表单的值示例

    这里使用的是Element-ui组件 html: <el-input placeholder="请输入手机号" id="phone" prop="phone" v-model="phone" clearable></el-input> JS: var phone = this.phone; var password = this.password; var that = this; var phone

  • django+vue实现注册登录的示例代码

    注册 前台利用vue中的axios进行传值,将获取到的账号密码以form表单的形式发送给后台. form表单的作用就是采集数据,也就是在前台页面中获取用户输入的值.numberValidateForm:前台定义的表单 $axios使用时需要在main.js中全局注册,.then代表成功后进行的操作,.catch代表失败后进行的操作 submitForm(formName) { let data = new FormData() data.append('username',this.number

  • vue使用exif获取图片旋转,压缩的示例代码

    <template> <div> <input type="file" id="upload" accept="image" @change="upload" /> </div> </template> <script> export default { data() { return { picValue:{}, headerImage:'' }; },

  • Vue实现Google第三方登录的示例代码

    目录 一.开发者平台配置 解决问题BUG 一.开发者平台配置 1.进入开发者平台,首先前往Google API 控制台选择或者创建一个项目 谷歌开发者平台 一堆眼花缭乱的API让你无从选择,但是你只要记住这次进来的目的是:社交API 2.使用这个API之前还需要做一件事,那就是申请一个OAuth 2.0 客户端 ID 3按照要求填写你项目的类型.名称以及来源url 注:创建完成之后,页面也有一个弹窗将你申请的客户端ID已经密钥展示出来,没错这个就是一个生成的过程. 4.安装vue-google-

  • vue实现通过手机号发送短信验证码登录的示例代码

    本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码,分享给大家,具体如下: <template> <div class="get-mobile" @touchmove.prevent> <div class="main"> <div class="pt-20 pr-15 pl-15 pb-20"> <input class="input mb-15" v-mod

  • mpvue网易云短信接口实现小程序短信登录的示例代码

    上一篇简单介绍了mpvue实现快递单号查询,慢慢发现mpvue真的和vue很像,但它有几乎十分的吻合小程序的语法规范,刚开始用起来会觉得特点的爽,但涉及到细节却是有很多采坑的地方.今天利用网上的网易云接口,再结合mpvue简单写一写小程序短信验证登录. 简单封装的一个网络请求文件,网易云接口网上大佬们GitHub上还是比较的多而且开源 const baseURL = "https://*****:1717"; //基路径 exports.http = function({url,met

  • Vue微信公众号网页分享的示例代码

    前言 今天做了个分享功能,反正挺诡异的,下面就来说一说步骤 后端使用egg.js,代码如下: 'use strict'; const Subscription = require('egg').Subscription; class AccessToken extends Subscription { static get schedule() { return { interval: '2h',//2小时获取一次 type: 'all', }; } async subscribe() { co

  • Python 通过爬虫实现GitHub网页的模拟登录的示例代码

    1. 实例描述 通过爬虫获取网页的信息时,有时需要登录网页后才可以获取网页中的可用数据,例如获取 GitHub 网页中的注册号码时,就需要先登录账号才能在登录后的页面中看到该信息,如下图所示.那么该如何实现模拟登录的功能呢?本文实现将通过爬虫实现 GitHub 网页的模拟登录. 2. 代码实现 在实现 GitHub 网页的模拟登录时,首先需要查看提交登录请求时都要哪些请求参数,然后获取登录请求的所有参数,再发送登录请求.如果登录成功的情况下获取页面中的注册号码信息即可.具体步骤如下: (1) 点

随机推荐