<template> <div> <div> <router-link to="https://www.jb51.net/">Home</router-link> | <router-link to="/about">About</router-link><span v-if="isLoggedIn"> | <a @click="logout">Logout</a></span> </div> <router-view/> </div> </template>
如果用户登录进去后，你能看到关联的Logout了 吗？很好。
现在，让我们给logout添加逻辑。
<script> export default { computed : { isLoggedIn : function(){ return this.$store.getters.isLoggedIn} }, methods: { logout: function () { this.$store.dispatch('logout') .then(() => { this.$router.push('/login') }) } }, } </script>
当用户点击退出按钮时，我们其实在做两件事 — 计算用户验证的状态和分发vuex store里面的退出事件。在退出之后，我们利用 this.$router.push('/login')，切换用户到 login页面。当然你可以改变任何你想让用户跳转的地方。
就是这样了。让我们用vuex构建权限模块。
Vuex权限模块
如果你读过以前的**部分, 你应该注意到我们需要在本地存储用户权限token，同时，当用户被授予权限后，我们随时需要重新得到token以及用户信息。
首先, 让我们给vuex创建 store.js文件:
import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { status: '', token: localStorage.getItem('token') || '', user : {} }, mutations: { }, actions: { }, getters : { } })
如果你注意到，我们同时引入了vue,vuex和axios，之后让vue使用vuex，这是因为它是很重要的一步。
我们已经定义了state的属性。现在vuex的state能够支持验证状态， jwt token以及用户信息。
创建Vuex登录事件
Vuex actions里面主要是提交更改到vuex的store里面。我们将创建一个login 的action，它将使用服务器对用户进行身份验证，并向vuex存储提交用户凭据。打开./src/store.js文件，并添加下面到actions对象中：
login({commit}, user){ return new Promise((resolve, reject) => { commit('auth_request') 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) axios.defaults.headers.common['Authorization'] = token commit('auth_success', token, user) resolve(resp) }) .catch(err => { commit('auth_error') localStorage.removeItem('token') reject(err) }) }) },
登录action通过vuex commit验证，我们将用它进行触发更改。vuex store里面能记录这些更改的变化。
我们正在调用服务器的登录路径并返回必要的数据。我们在本地存储token，之后通过auth_success来更新存储用户信息和token。在这一点上，我们也在头部设置了axios 。
我们可以在vuex store中存储token，但是如果用户离开我们的应用，所有在vuex里面的存储都将消失。为了确保用户在有效时间内不用再重复登录，我们只能将token进行本地存储。
重要的是你知道这些是如何工作的，这样你就能决定你到底想要实现什么。
我们返回一个promise，这样我们能在用户登录完成后，做出响应。
创建Vuex注册事件
像 login 事件, the register 事件是同一种工作方式。在相同的文件中，添加下面的到actions对象里面:
register({commit}, user){ return new Promise((resolve, reject) => { commit('auth_request') axios({url: 'http://localhost:3000/register', data: user, method: 'POST' }) .then(resp => { const token = resp.data.token const user = resp.data.user localStorage.setItem('token', token) axios.defaults.headers.common['Authorization'] = token commit('auth_success', token, user) resolve(resp) }) .catch(err => { commit('auth_error', err) localStorage.removeItem('token') reject(err) }) }) },
它与login 事件工作方式很像,。称之为有共同的mutators的 login 和register ，具有相同的目标——让用户进入系统。
创建Vuex退出事件
我们希望用户能够退出系统，同时，我们希望销毁上一次验证的会话数据。在同一个actions对象中，添加下面：