使用Vuex解决Vue中的身份验证问题

我们返回一个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对象中，添加下面：

logout({commit}){
 return new Promise((resolve, reject) => {
 commit('logout')
 localStorage.removeItem('token')
 delete axios.defaults.headers.common['Authorization']
 resolve()
 })
}

现在，当用户点击退出时，我们将移除之前在 axios头部设置的jwt token 。他们现在将无法执行需要token的事务。

创建Mutations

像我之前提到的，mutators是被用来改变vuex store的状态。让我们在应用中给用过的mutators定义。在mutators对象中，添加下面的：

mutations: {
 auth_request(state){
 state.status = 'loading'
 },
 auth_success(state, token, user){
 state.status = 'success'
 state.token = token
 state.user = user
 },
 auth_error(state){
 state.status = 'error'
 },
 logout(state){
 state.status = ''
 state.token = ''
 },
},

创建Getters

我们使用getter来获取vuex状态中的属性值。在这种情况下，getter的作用是将应用程序数据与应用程序逻辑分离，并确保我们不会泄露敏感信息。

添加下面的到getters 对象中:

getters : {
 isLoggedIn: state => !!state.token,
 authStatus: state => state.status,
}

你会同意我的观点，这是一种更简洁的访问存储数据的方式☺️.

在Auth后面隐藏页面

这篇文章的整个目的是实现身份验证，让没有权限的用户看不到某些页面。为了实现这个，我们需要知道用户想要访问的页面，以及当用户被授权时，我们有一定的方法来检验它。我们同时需要一定的方式，如果某些页面，授权或者未授权的用户可以单独或者同时访问的。这些都是很重要的考虑条件，幸运地是，我们可以通过vue-router来说实现。

定义路由给授权和未授权的页面

打开 ./src/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。我们同时还引入了定义的所有组件，并设置vue中使用路由。

让我们定义路由:

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

export default router

 我们路由的定义是很普遍的。对于需要权限验证的路由，我们需要增加额外的数据，确保当用户访问它时，我们可以识别它。这是添加到路由定义中的元属性的本质。如果你想问_”我可以添加更过的数据给元数据并使用它吗?”，我很坚定的告诉你，这是绝对的😁。

解决未授权访问示例

我们有自己的路由定义。现在，让我们检验未授权访问并采取行动。在 router.js文件中，添加下面的在 export default router之前：

router.beforeEach((to, from, next) => {
 if(to.matched.some(record => record.meta.requiresAuth)) {
 if (store.getters.isLoggedIn) {
 next()
 return
 }
 next('/login') 
 } else {
 next() 
 }
})

从这篇文章，通过使用vue router来进行身份验证，你可以回想一下我们这里有一个非常复杂的机制，它变得非常大，变得非常混乱。vuex已经帮我们简化了它，我们可以继续给路由添加任何条件。在我们的vuex存储中，我们可以定义操作来检查这些条件并获取返回它们的值。

解决Token过期示例

因为我们在本地存储token,它可以一直保留着。这意味着无论何时，我们打开自己的应用，它可以自动的验证用户，即使token已经过期失效。最多的情况是，我们的请求会因为无效token而持续失败。这对于用户是个不好的体验。

现在, 打开./src/App.vue 文件并在script里面，添加下面的：

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;
 });
 });
 }
}

我们截获axios请求，已确定是否获取到401未授权响应。如果这么做，我们分发 logout 事件，那么用户获得退出应用。这会让用户跳转到之前设计的 login页面，这样他们可以再次登录。

我赞同这样会提升用户体验 ☺️.

结束

从以前的文章来看，您可以看到，基于vuex的引入，我们目前的应用程序发生了重大变化。现在，我们不依赖于一直检查token，不管到哪里都有混乱的条件。我们可以简单地使用vuex存储来管理权限，并且只需使用几行代码检查应用程序中的状态。

以上所述是小编给大家介绍的使用Vuex解决Vue中的身份验证问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！