vuex配置token和用户信息
首先设计的是登录成功后端产生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