在vue中获取token,并将token写进header的方法

2024-10-13 12:55:01

需要准备的东西：Vue+axios+Vuex+Vue-router

1.在login.vue中通过发送http请求获取token

//根据api接口获取token
var url = this.HOST + "/session";
this.$axios.post(url, {
username: this.loginForm.username,
password: this.loginForm.pass
}).then(res => {
// console.log(res.data);
this.$message.success('登录成功');
let data = res.data;
//根据store中set_token方法将token保存至localStorage/sessionStorage中，data["Authentication-Token"]，获取token的value值
this.$store.commit('set_token', data["Authentication-Token"]);

if (store.state.token) {
this.$router.push('/')
console.log(store.state.token)
} else {
this.$router.replace('/login');
}

}).catch(error => {
// this.$message.error(error.status)
this.loading = false
this.loginBtn = "登录"
this.$message.error('账号或密码错误');
// console.log(error)

})

2.在store.js中对token状态进行监管

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state:{
token:''
},
mutations:{
set_token(state, token) {
state.token = token
sessionStorage.token = token
},
del_token(state) {
state.token = ''
sessionStorage.removeItem('token')
}
}
})

3.在router/index.js中

// 页面刷新时，重新赋值token
if (sessionStorage.getItem('token')) {
store.commit('set_token', sessionStorage.getItem('token'))
}

const router = new Router({
mode: "history",
routes
});

router.beforeEach((to, from, next) => {
if (to.matched.some(r => r.meta.requireAuth)) {   //这里的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表示进入该路由需要登陆的
if (store.state.token) {
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}
})
}
}
else {
next();
}
})

4.在main.js中定义全局默认配置：

Axios.defaults.headers.common['Authentication-Token'] = store.state.token;

5.在src/main.js添加拦截器

// 添加请求拦截器
Axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
//判断是否存在token，如果存在将每个页面header都添加token
if(store.state.token){
config.headers.common['Authentication-Token']=store.state.token
}

return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

// http response 拦截器
Axios.interceptors.response.use(
response => {

return response;
},
error => {

if (error.response) {
switch (error.response.status) {
case 401:
this.$store.commit('del_token');
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error.response.data)
});

以上这篇在vue中获取token,并将token写进header的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

基于vue 实现token验证的实例代码

vue-koa2-token 基于vue的做了token验证前端部分(对axios设置Authorization) import axios from 'axios' import store from '../store' import router from '../router' //设置全局axios默认值 axios.defaults.timeout = 6000; //6000的超时验证 axios.defaults.headers.post['Content-Type'] =
vue登录注册及token验证实现代码

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

首先回顾一下token: token认证是RESTFUL.api的一个很重要的部分,通过token认证和token设置,后端会有一个接口传给前台: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就是向用户表里去生成一个token 这里的client_id相当于用户名,client_key相当于密码,这样后台会生成一个client_token,我们需要把这个token保存到客户
vue 权限认证token的实现方法

最近搞一个vue的项目,接口带了权限验证,于是乎稍微研究了一下,中间遇到的各种坑都来源于自己概念的不熟悉. 主要呢是分两步: 一是vue路由层的控制,由于项目的路由有规律可循,所以没有采用网上requireAuth那种在需要加验证的路由上配置meta(具体见:https://www.jb51.net/article/143928.htm) import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const rou
在vue中获取token,并将token写进header的方法

需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli
在Vue中获取组件声明时的name属性方法

在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err
Vue 中获取当前时间并实时刷新的实现代码

1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods
在Vue 中获取下拉框的文本及选项值操作

方法1:  <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo
在Vue中获取自定义属性方法:data-id的实例

获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = "item.id"属性第三步:在<script>里面的属性methods里面添写上事件函数 getDateId(id){} 在事件函数里面获取id的值即可 <template> <h2 class="left t-title" @cli
在vue中获取wangeditor的html和text的操作

目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wangeditor 全部是小写字母) npm install wangeditor 2: 直接在项目模板中引用 import E from 'wangeditor' 3:HTML <div id="editorElem" style="text-align:left"
如何在Vue中获取DOM元素的实际宽高

目录前言一.获取元素二.获取元素宽高补充:vue项目获取dom元素宽高总是不准确总结前言最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box
Vue中this.$router和this.$route的区别及push()方法

官房文档里是这样说明的: 通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由可以理解为: this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法. this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, pa
vue中使用iview自定义验证关键词输入框问题及解决方法

一.验证需求对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru

在vue中获取token,并将token写进header的方法

相关推荐

随机推荐