vuex登录后设置token

第一步：

建立cookie的添加、设置、和删除

auth.js

import Cookies from 'js-cookie'const TokenKey = 'APPMGRID'  //APPMGRID这个token名字自己定义export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}

第二步：

点击登录按钮的时候去调用登录接口

 this.$store.dispatch('user/login', this.loginForm).then(data => {this.loading = falseif (data === null) returnthis.$router.push({ path: '/dashboard' })}).catch(() => {this.loading = false})

this.loginForm 是调用登录传递的数据。

第三步：

设置store，login 登录的API和操作cookie的方法。调用login接口的时候，获取token信息，然后设计进 cookie。
store

import { login } from '@user.js' //引入user.js
import { getToken, setToken, removeToken } from '@auth.js'   //引入auth.jsconst state = {token: getToken()
}const mutations = {SET_TOKEN: (state, token) => {state.token = token}
}const actions = {// user loginlogin({ commit }, userInfo) {return new Promise((resolve, reject) => {login(userInfo).then(response => {const { APPMGRID } = responsecommit('SET_TOKEN', APPMGRID)setToken(APPMGRID)resolve(response)}).catch(error => {reject(error)})})}
}

接口API地址

user.js

export function login(data) {return request({url: '/home/login',method: 'post',data})
}

第四步：

封装的请求文件

request.js

import axios from 'axios'
import qs from 'qs'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000, // request timeoutheaders: {'Content-Type': 'application/x-www-form-urlencoded'}
})// request interceptor
service.interceptors.request.use(config => {// do something before request is sentif (config.method === 'post') {config.data = qs.stringify(config.data)}if (config.method === 'get') {config.url = config.url + '?' + qs.stringify(config.data)}if (store.getters.token) {// let each request carry token// ['X-Token'] is a custom headers key// please modify it according to the actual situation// config.headers['X-Token'] = getToken()if (getToken()) {config.headers['APPMGRID'] = getToken()}}return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return  response => response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const data = response.dataif (data.result === 'success') {return Promise.resolve(data.data)} else {MessageBox.alert(data.message + '： ' + data.detail, '提示', {confirmButtonText: '确定',type: 'warning',lockScroll: false}).catch(() => {})return null}},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

设置成功以后每次请求都会头部家伙加上数据：

vuex登录后设置token相关推荐

axios 登录后设置header_axios如何利用promise无痛刷新token
需求最近遇到个需求:前端登录后,后端返回token和token有效时间,当token过期时要求用旧token去获取新的token,前端需要做到无痛刷新token,即请求刷新token时要做到用户无感 ...
vue中后台管理登录后的token管理
在做后台管理系统的时候,登录后token管理很重要.上代码,有瑕疵,有待改善,见谅. import Vue from 'vue' import Router from 'vue-router' imp ...
【自动化测试】解决获取Okta登录后的token问题
背景: 为公司的项目做自动化,做的是一个regression自动化,将UI和API写在同一个项目里,关键场景的UI cases和全量的API cases. 但是在API中,有个接口是必须要真实用户的t ...
axios 登录后设置header,vue+axios 全局添加请求头和参数操作
vue+axios 全局添加请求头和参数操作走登录的接口都会返回一个 token 值, 然后存起来方便之后调接口的时候给后台传过去, 传给后台的方式有两种:(具体使用哪种需要和后台商量) 1, 放在 ...
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
在vue中,可以用sessionStorage或localStorage来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage),下面介绍用localS ...
ssh 免密码登录（设置后仍需输密码的原因及解决方法）
ssh 免密码登录(设置后仍需输密码的原因及解决方法) 参考文章: (1)ssh 免密码登录(设置后仍需输密码的原因及解决方法) (2)https://www.cnblogs.com/guanyf/p ...
设置SAP登录后的背景图片（很有意思）
事务码:SMW0 进入SMW0或者通过菜单"Tools -> Web Development -> Web Repository"(中文系统"工具 -> ...
Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法
Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧,有时候我们用某个账户登录后,发现导航栏无法显示在左侧,操作十分不方便.我们可以去数据库删除当前登录用户的自定义布局解决方法如下 ...
php登录后自动退出登录,PHP利用Cookie设置用户30分钟未操作自动退出功能
登陆控制器需要做的登陆成功把用户ID等信息存入cookie: $this->systemSetKey(array('name'=>$admin_info['admin_name'], 'i ...

vuex登录后设置token

第一步：

第二步：

第三步：

第四步：

vuex登录后设置token相关推荐

最新文章

热门文章