首先设计的是登录成功后端产生token,前端取出放在Local Storage,便于后面每个请求默认带上这里的token以及取用户相关信息

和main.js同级建store.js文件,代码如下

import Vue from 'vue'
import Vuex from 'vuex'
// import {getproductByIndex} from '@/data/getdata.js' Vue.use(Vuex)
const key ='token'
const account_key = 'account' const store =new Vuex.Store({
state(){
return{
token:localStorage.getItem('token') ? localStorage.getItem('token'):'',
account:localStorage.getItem('account') ? localStorage.getItem('account'):''
// 账号 }
},
getters:{
getSortage:function (state) {
if(!state.token){
state.token =JSON.parse(localStorage.getItem(key))
}
return state.token
},
getaccount: function(state){
state.account=JSON.parse(localStorage.getItem(account_key))
return state.account
}
},
mutations:{
$_setStorage(state,value){
state.token =value;
localStorage.setItem(key,value)
// localStorage.setItem(key,JSON.stringify(value))
},
$_setAccount(state,account_va){
state.account =account_va
localStorage.setItem("account",account_va) // localStorage.setItem(account,JSON.stringify(account))
}
},
})
export default store

 

这时候再加全局header签名我们在项目中请求就不用针对header传token了,在main.JS配置

// 全局header签名
axios.interceptors.request.use(
config => {
if (store.state.token) {
config.headers.common['token'] = store.state.token
}
return config;
},
error => {
//请求错误
return Promise.reject(error);
} )

  

项目中存值

<script>

import store from "../store";
export default {
name: "login",
components: { },
methods:{
login(){
if (this.account == "" || this.pwd == "") {
this.$message.warning("请输入账号或密码");
} else if (this.account && this.pwd) {
let data = { account: this.account, password: this.pwd };
this.$axios
.post("/user/login/", data)
.then(res => {
if (res.data.status == 200) {
this.$message.success(res.data.message);
this.sendKey.userccount = res.data.account;
this.sendKey.usertoken = res.data.token;
// 登录成功产生token放到store
this.$store.commit("$_setStorage", res.data.token);
// 登录成功后取出用户名放到store
this.$store.commit("$_setAccount", res.data.account); this.$router.push({ path: "/home" }); } }

  

在项目中取出Local Storage存的值

1.template中引用

{{this.$store.state.account}}

2.方法引用

this.$store.state.accoun

vuex配置token和用户信息的更多相关文章

  1. JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  2. Spring Cloud云架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)

    上一篇我根据框架中OAuth2.0的使用总结,画了SSO单点登录之OAuth2.0 登出流程,今天我们看一下根据用户token获取yoghurt信息的流程: /** * 根据token获取用户信息 * ...

  3. 整合spring cloud云架构 - 根据token获取用户信息

    根据用户token获取yoghurt信息的流程: /** * 根据token获取用户信息 * @param accessToken * @return * @throws Exception */ @ ...

  4. uni-app开发经验分享三: Vuex实现登录和用户信息留存

    在做用户登录的过程中,其实最重要的是登录成功后的数据要怎么储存,储存到哪里,这里我分享一个利用vuex来实现用户登录和用户数据留存的方法 vuex代码如下: //引入vue和vuex import V ...

  5. .NET微信开发通过Access Token和OpenID获取用户信息

    本文介绍如何获得微信公众平台关注用户的基本信息,包括昵称.头像.性别.国家.省份.城市.语言. 本文的方法将囊括订阅号和服务号以及自定义菜单各种场景,无论是否有高级接口权限,都有办法来获得用户基本信息 ...

  6. 服务器配置用户信息、ssh免密码登录和防火墙等安全配置

    一.登录服务器      1.回到根目录 cd ~      2.ssh + 用户名@服务器公网地址 ssh root@47.94.208.76      3.输入密码:注意输入法大小写 二.查看服务 ...

  7. 微信网页授权,获取微信code,获取access_tocken,获取用户信息

    微信开发中,经常有这样的需求:获得用户头像.绑定微信号给用户发信息.. 那么实现这些的前提就是授权!   1.配置安全回调域名: 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 ...

  8. 用户登录拦截器查询到登录用户后如何将用户信息传递到后面的Controller

    taotao创建订单代码中之前忘了加入用户信息,那么加上呢? 分析:用户创建订单的时候,我们会强制要求用户先登录,也就是说,创建订单的Controller执行时,一定是用户已经登录了的,而用户只要登录 ...

  9. 搭建nuxtjs程序 —— 用户信息 or token怎么不丢失

    框架背景:开发框架采用vue,需要更好的SEO,更快的内容到达时间,从浏览器看不到对服务器的请求接口,选用开箱即用的nuxtjs. 问题背景:1. 前后分离,需前端存储token及登录后的用户信息: ...

随机推荐

  1. jmeter旅程第一站:Jmeter抓包浏览器或者抓取手机app的包

    学习jmeter?从实际出发,我也是一个初学者,会优先考虑先用来做一些简单的抓包.接口测试,在实践的过程中学习jmeter用途.那么接下来,这篇文章我会以jmeter抓包开启我的jmeter旅程. 这 ...

  2. html正文提取工具goose的安装及简单使用Demo

    1.git clone https://github.com/grangier/python-goose.git 2.cd python-goose 3.sudo pip install -r req ...

  3. AT2305-[AGC010D]Decrementing【博弈论】

    正题 题目链接:https://www.luogu.com.cn/problem/AT2305 题目大意 \(n\)个数字两个人进行博弈,每个人的操作为 选择一个大于1的数字减一 之后所有数字除以所有 ...

  4. ping探测与Nmap扫描

    一.实验目的 学习信息收集的一般步骤 学会使用ping命令 利用Nmap工具进行信息搜集 二.实验环境 系统环境:一台windows7系统.一台XP系统.一台kali系统 软件环境:安装Wiresha ...

  5. 使用node-gyp编写简单的node原生模块

    通过样例,让我们了解如何编写一个node的原生模块.当然,这篇文章还有一个目的,是为了方便以后编写关于node-gyp的文章,搭建初始环境. 基于node-addon-api 基于node-addon ...

  6. 飞猪基于 Serverless 的云+端实践与思考

    作者 | 王恒飞(承荫) 本文整理自飞猪旅行前端技术专家--王恒飞(承荫)在[阿里云 Serverless Developer Meetup 上海站]上的分享.点击查看直播回放:https://dev ...

  7. Netty 进阶

    1. 粘包与半包 1.1 粘包现象 服务端代码 public class HelloWorldServer { static final Logger log = LoggerFactory.getL ...

  8. Solon 框架如何方便获取每个请求的响应时间?

    经常会有同学问 Solon 怎样才能获取每个请求的响应时间?要求是不需要给每个函数加注解.故此,整理了一下. 不给每个函数加注解,主要有两种方式可以获取请求响应时间: 方式1:基于全局过滤器 Solo ...

  9. 验证域用户(C#)

    代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Intero ...

  10. 《HelloGitHub》第 67 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweihan/HelloGitHu ...