使用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对象。

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

同时，也设置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的过程进行全程的控制。

meta对路由记录进行条件设置
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页面，重新登陆！

如此改善了用户体验！

巴特西