vue.js - Vue前端单页项目的用户认证思路

问题描述

问 题

环境：

• Backend：Laravel + Passport

• Frontend：Vue 2.0 + Vuex + Vue-router

问题：

前端登陆后获取access_token,保存在localStorage中，那么用户退出登录的话需要怎么操作？清空localStorage吗？是否需要向后端再发送请求？

如果用户没有点击退出登录，而是直接关闭浏览器或者窗口呢，下次访问时，localStorage里的access_token依然存在，这样的话安全性不太好吧？

我的access_token的有效期是一年，那么每次登录都会重新生成，这个怎么解决？

求前端用户认证的处理思路……万分感谢！！！

解决方案

刚好在做JWT的验证，用axios和router做验证，暂时还未完成，先贴一部分代码参考

axios部分

import Vue from 'vue'
import axios from 'axios'

var http = axios.create({
  baseURL: process.env.API_URL
});

http.init = function () {
  http.interceptors.request.use(config => {
    this.load = true;
    if (localStorage.JWT_TOKEN) {
      config.headers = {'Authorization': localStorage.JWT_TOKEN};
    }
    return config;
  }, err => {
    this.load = false;
    console.error(err);
  });
  http.interceptors.response.use(res => {
    this.load = false;
    if (res.data.code === 1) {
      return res.data.data;
    } else {
      if (res.data.code == 4) {
        localStorage.removeItem('JWT_TOKEN');
        this.$router.push('/Login');
        alert(res.data.msg);
      } else if (res.data.code == 401) {
        localStorage.removeItem('JWT_TOKEN');
        this.$router.push('/Login');
      } else {
        throw new Error(res.data.msg);
      }
    }
  }, err => {
    this.load = false;
    throw new Error(res.data.msg);
  });
}

Vue.prototype.$http = http;

router部分：

import Vue from 'vue'
import Router from 'vue-router'

function include (name) {
  return resolve => require(['components/' + name], resolve);
}

function route (name) {
  return {
    name: name,
    path: name,
    component: include(name)
  }
}

Vue.use(Router);

var router = new Router({
  base: '/admin/',
  mode: 'history',
  routes: [
    {
      name: 'Index',
      path: '/',
      component: include('Index'),
      children: [
        {
          name: 'User',
          path: 'User/:page/:rows',
          component: include('User')
        }
      ]
    },
    {
      name: 'Login',
      path: '/Login',
      component: include('Login')
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

router.beforeEach(({name}, from, next) => {
  if (localStorage.JWT_TOKEN) {
    if (name == 'Login') {
      next('/');
    } else {
      next();
    }
  } else {
    if (name == 'Login') {
      next();
    } else {
      next({name: 'Login'});
    }
  }
});

export default router;

这篇关于vue.js - Vue前端单页项目的用户认证思路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！