vue中怎么获取local storage

与vue无关，直接用js就可以了。

localStorage.getItem(key)

localStorage其实就是一个全局对象，你可以直接打印出来看。

console.log(localStorage)

------------------正文开始------------------

开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？

为了更加方便消化本文章，建议先看下官方文档：

环境变量和模式

看完官方的文档如果还没有明白，可以参考本文。

在vue-cli 构建的项目中，默认有3种模式，如下图：

我个人的理解就是：

你执行npm run serve时，对应的环境就是开发环境；

你执行npm run build时，对应的环境就是生产环境。

如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。

来，左边跟我一起画个龙，在你右边儿画一道彩虹 画完了，开始进入主题了

------------------进入主题------------------

如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境，所以配置了5个.env文件。如下图：

基本格式如下：

<pre>NODE_ENV=环境名称

VUE_APP_URL=对应的环境地址</pre>

如我本地环境的配置就如下图所示：

我本地是用的easy-mock模拟的数据，所以配置的地址是mock接口地址。

如官方文档所说，可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图：

请注意我配置文件中的 serve 与 build 。

文件已创建好，配置语句也已写好。怎么用它呢？

首页你需要哪个环境，就执行哪个环境的命令语句。

比如我现在需要local环境，就执行 npm run local-serve 。如下图所示：

然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。

比如我们在axios请求中，就可以把它的baseURL设置为 process.env.VUE_APP_URL ，如下图所示：

后面的"/web"是根据我自己接口来的，你别也写个"/web"。

如果你不确定你自己现在是在哪个环境变量下，可以 console.log("当前环境变量："+process.env.NODE_ENV) 和 console.log("当前环境路径："+process.env.VUE_APP_URL) 看下。

像我的项目中就是下面这2个东东：

输出的内容就是.env.local文件里面配置的环境变量。

为了更好的理解，我们再执行一条语句， npm run serve ,看看此时的环境变量是哪个？

为什么呢？

因为 npm run serve 默认指向.env.developement，我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图：

总而言之就是，你需要哪个环境变量，就 【npm run 对应的环境变量】 就完事了！

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

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

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

vue-cli搭建一个项目，简单说明前端要做的事：

一、调登录接口成功，在回调函数中将token存储到localStorage和vuex中

login.vue

<template>

  <div>

    <input type="text" v-model="loginForm.username" placeholder="用户名"/>

    <input type="text" v-model="loginForm.password" placeholder="密码"/>

    <button @click="login">登录</button>

  </div>

</template>

<script>

import { mapMutations } from 'vuex'

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    }

  },

  methods: {

    ...mapMutations(['changeLogin']),

    login () {

      let _this = this

      if (this.loginForm.username === '' || this.loginForm.password === '') {

        alert('账号或密码不能为空')

      } else {

        this.axios({

          method: 'post',

          url: '/user/login',

          data: _this.loginForm

        }).then(res => {

          console.log(res.data)

          _this.userToken = 'Bearer ' + res.data.data.body.token

          // 将用户token保存到vuex中

          _this.changeLogin({ Authorization: _this.userToken })

          _this.$router.push('/home')

          alert('登陆成功')

        }).catch(error => {

          alert('账号或密码错误')

          console.log(error)

        })

      }

    }

  }

}

</script>

store文件夹下的index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {

    // 存储token

    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''

  },

  mutations: {

    // 修改token，并将token存入localStorage

    changeLogin (state, user) {

      state.Authorization = user.Authorization

      localStorage.setItem('Authorization', user.Authorization)

    }

  }

})

export default store

二、路由导航守卫

 router文件夹下的index.js

import Vue from 'vue'

import Router from 'vue-router'

import login from '@/components/login'

import home from '@/components/home'

Vue.use(Router)

const router = new Router({

  routes: [

    {

      path: '/',

      redirect: '/login'

    },

    {

      path: '/login',

      name: 'login',

      component: login

    },

    {

      path: '/home',

      name: 'home',

      component: home

    }

  ]

})

// 导航守卫

// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆

router.beforeEach((to, from, next) =>{

  if (to.path === '/login') {

    next()

  } else {

    let token = localStorage.getItem('Authorization')

    if (token === 'null' || token === '') {

      next('/login')

    } else {

      next()

    }

  }

})

export default router

三、请求头加token

// 添加请求拦截器，在请求头中加token

axios.interceptors.request.use(

  config =>{

    if (localStorage.getItem('Authorization')) {

      config.headers.Authorization = localStorage.getItem('Authorization')

    }

    return config

  },

  error =>{

    return Promise.reject(error)

  })

四、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

        localStorage.removeItem('Authorization')

        this.$router.push('/login')

---