nuxt|nuxt系列【二】用户登录存储用户信息和token,实现权限认证 nuxt|Javascript

【nuxt|nuxt系列【二】用户登录存储用户信息和token,实现权限认证】Nuxt.js是基于在Vue.js的服务端渲染框架，能完美的解决SEO的问题，但同时权限认证成为了一大痛点，需要解决用户登录后，保存token，来验证后续的权限的问题。
解决方法：利用js-cookie 保存token，这样能在token能在头部被获取，同时并用vuex,将token和用户信息存储在store中。
1.登录操作

const Cookie = process.client ? require('js-cookie') : undefined// 获取token getToken() { let vm = this // 这里将axios 做了一些封装 User.userLogin.request(this.form, (res) => { let token = res.data['token'] vm.$store.commit('setAuth', token) Cookie.set('auth', token) vm.getUserInfo() }, (error) => { vm.$notify.error({title: '请输入正确的用户名和密码！'}) }) }, // 获取用户信息 getUserInfo() { let vm = this User.userInfo.request((res) => { let data = https://www.it610.com/article/res.data if (data) { vm.$store.commit('setUser', data) vm.$router.push('/reading-list') } }) },

2.中间件authenticated.js
由于store 里面的数据刷新后清空，所以添加中间件，重新设置store数据。如果头部不含用户信息，即cookie失效则重新登录。

import getCookie from '@/config/get-cookie'export default function ({store, route, redirect, req}) { // If the user is not authenticated const {auth} = getCookie(req) if (auth) { store.commit('setAuth', auth) return store.dispatch('getUserInfo') } const routePath = route.path const extraPath = ['/'] if ((!store.state.auth) && extraPath.indexOf(routePath) === -1) { // 跳转到登录页面 return redirect('/') } }

在nuxt.config.js 中使用中间件

router: { middleware: ['authenticated'], }

3.store/index.js

添加nuxtServerInit函数

nuxtServerInit({commit, state}, {req}) { //console.log('nuxt init') // console.log(req.headers.cookie) let auth = null if (req.headers.cookie) {const parsed = cookieparser.parse(req.headers.cookie) try { auth = JSON.parse(parsed.auth) } catch (err) { // No valid cookie found } commit('setAuth', auth) } },

4.axios 拦截器添加token到header中