使用Vuex来处理Authentication token

https://www.cnblogs.com/chentianwei/p/10156459.html

之前博客：建立了一个app。使用loacal storage 来管理tokens（通过client-side anuthentication 生成）。

问题是这种方法有些麻烦。

每次要检验用户是否通过验证，都需要先储存auth token和user信息进localStorage，然后在从中取出来进行各种各样的条件判断，boring。

            this.$http.post(url, {
    //...略
            })
            .then(response => {
              localStorage.setItem('user', JSON.stringify(response.data.user))
              localStorage.setItem('jwt', response.data.token)

              if (localStorage.getItem('jwt') != null) {
    //...略
              }
            })／／    

可以改用Vuex。

使用store来管理authentication state, 然后只需使用少许代码即可检查我们的application.

---

main.js引进axios

import Axios from 'axios'

Vue.prototype.$http = Axios
const token = localStorage.getItem('token')
if (token) {
  Vue.prototype.$http.defaults.headers.common['Authorization'] = token
}

We also set the Authorization on axios header to our token, so our requests can be processed if a token is required. This way, we do not have to set token anytime we want to make a request.

默认设置，所有请求都会配置到：

给axios的headers赋值token 。这样，无需在每一次想要发出请求时，都设置token。

见axios Defaults

store.js解释

state存储

• authentication status, 用于当使用mutation时，status数据储存验证过程的状态：pending，success, error。

• jwt token

• user信息

actions中的函数

login函数：

    login({commit}, user) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        // 这是其中一种类似config的写法，也可以使用axios.post('', {...})
        axios({url: 'http://localhost:3000/login', data:user, method: 'POST'})
        .then(resp => {
          const token = resp.data.token
          const user = resp.data.user
          localStorage.setItem('token', token)
　　　　　　//main.js中设置了Vue.prototype.$http = Axios
          axios.defualts.headers.common['Authorization'] = token
          commit('auth_success', token, user)
          // 返回一个状态由resp决定的Promise对象。
          resolve(resp)
        })
        .catch(err => {
          commit('auth_error')
          localStorage.removeItem('token')
          // 返回一个状态为失败的Promise对象
          reject(err)
        })
      })
    },

这里使用new Promise构造器返回一个promise对象。

login action用于验证一个user,并commit用户的credentials到vuex store。

1. 使用axios调用服务器的login路由，并返回需要的data。
2. 然后储存token到localStorage，
3. 然后传递token和user的信息到auth_success mutation来更新store.state中的属性。
4. 同时，也设置axios的headers。

    axios.defaults.headers.common['Authorization'] = token

⚠️

token不要储存在vuex store中，一旦离开程序，所有的Vuex.store中的data都会消失。

因此，为了确保用户返回到程序后，只要token处于验证期内, 就无需让user再登陆一次。

需要把token储存再localStorage, 即本地设备中。

最后返回promise对象, 以便在login完成后，能够返回一个response给user。

---

---

知识扩展：

Promise对象及构造函数

Promise对象用于表示一个异步操作的最终状态（完成或失败），以及返回的值。

new Promise产生的构造函数用于包装还未支持promises的函数。

const myFirstPromise = new Promise((resolve, reject) => {
  // ?做一些异步操作，最终会调用下面两者之一:
  //
  //   resolve(someValue); // fulfilled
  // ?或
  //   reject("failure reason"); // rejected
});

例子：

var promisel = new Promise(function(resolve, reject) {
  //当异步代码执行成功后，调用resolve(),当异步代码执行失败后，调用reject()
  //本例子使用setTimout()来模拟异步代码
  //真实环境，通常使用HTMl5 API,或者如XHR。
  setTimeout(function() {
    resolve('Success!')  //Yes! Everything went well!
  }, 300);
})

promisel.then(function(value) {
  console.log(value)
 //控制台输出的是"Success"
})

描述：

Promise 对象是一个代理对象（代理一个值), 被代理的值在Promise对象创建时可能是未知的。

Promise is a proxy for a value not necessarily known when the promise is created。

它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。

It allows you to associate handlers with an asynchronous action's success value or failure reason.

这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。

一个Promise有3种状态：

• pending, 之后会导致成功或失败：
  • fulfilled
  • rejected

Promise.reject(reason)

返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法

Promise.resolve(value)

返回一个状态由给定value决定的Promise对象。

---

---

创建register action

和login action代码基本一样。区别是aixos.post的url路由不一样。

它们都会commit('auth_request'), commit('auth_success')因为这两个action的目标都是把user信息存入state。

创建logout action

当登出后，删除储存在本地设备的token。

同时使用delete方法删除Vue实例对象的属性。 这里用delete axios的headers。

    logout({commit}) {
      return new Promise((resolve, reject) => {
        commit('logout')
        localStorage.removeItem('token')
        // 使用Vue.delete(target), target可以是对象或数组。
        delete axios.defaults.headers.common['Authorization']
        resolve()
      })
    }

Hide Pages Behind Auth

本文的目的时implement anthentication，未通过验证的用户不能访问某些页面。

为了实现这个目的，需要弄明白：

1. 用户想访问的页面，应当有一个方法可以检查是否用户是通过验证的。

2.一个页面是专为验证过的用户访问的，还是所有用户都可以访问。

使用vue-router可以解决上面的2个问题

vue-router的导航守卫和路由meta信息可以对从当前url到另一个url的过程进行全程的控制。

1. meta对路由记录进行条件设置
2. navigation Guard对整个导航过程进行控制，根据meta进行判断是否跳转或者取消导航。

首先router.js:

import Vue from 'vue'
import Router from 'vue-router'
import store from './store.js'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Login from './components/Login.vue'
import Secure from './components/Secure.vue'
import Register from './components/Register.vue'

Vue.use(Router)

引进vue, vue-router, 和vuex store setup.

所有的组件也被引进，用于定义路由。

然后，使用meta属性。

[...]
let router = new Router({
  mode: 'history',
  routes: [
    //...略过home, login, register
    {
      path: '/secure',
      name: 'secure',
      component: Secure,
      meta: {
        requiresAuth: true
      }
    },
    //...略过about
  ]
})

export default router／   

使用router.beforeEach注册一个全局前置守卫：

router.beforeEach((to,from,next) => {
  // 要前往的路由是否有meta条件：
  // 是，进一步判断
  // 否，直接跳转到这个路由。
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断用户是否有权限进入这个页面：（使用了vuex store）
    if (store.getters.isLoggedIn) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

给路由记录增加各类条件（使用meta），然后用Navigation Guards来进行判断后，取消或者跳转。

这里还使用了VuexStore.getters中的方法，去掉了重复的条件判断。

通过Vuex store,我们能够定义actions来检查路由记录中的条件，定义getters返回这些条件的结果。

处理到期的Token

因为储存token在本地localStorage,token会永久保存。

如果它已经到期，那么我们的请求会因为invalid token而失败

打开./src/App.vue，增加一个hook:

export default {
  [...]
  created: function () {
    this.$http.interceptors.response.use(undefined, function (err) {
      return new Promise(function (resolve, reject) {
        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
          this.$store.dispatch(logout)
        }
        throw err;
      });
    });
  }
}

拦截收到的response，看是否得到的是401 Unauthorized response。

如果是401，则dispatch logout action，让本地token被删除，然后跳转到login页面，重新登陆！

如此改善了用户体验！