laravel – Ideen zur Benutzerauthentifizierung für Vue-Frontend-Single-Page-Projekte

Question

Umgebung:

• Backend: Laravel + Passport

• Frontend: Vue 2.0 + Vuex + Vue-Router

Frage:

Kann ich access_token,保存在localStorage中，那么用户退出登录的话需要怎么操作？清空localStorage erhalten, nachdem ich mich im Frontend angemeldet habe? Muss ich eine weitere Anfrage an das Backend senden?

Wenn der Benutzer nicht zum Abmelden klickt, sondern den Browser oder das Fenster direkt schließt, localStorage里的access_token ist es beim nächsten Besuch immer noch vorhanden. In diesem Fall ist die Sicherheit nicht sehr gut, oder?

Mein access_token ist ein Jahr lang gültig und wird daher jedes Mal neu generiert, wenn ich mich anmelde. Wie kann dieses Problem gelöst werden?

Bitte geben Sie mir einige Ideen zum Umgang mit der Front-End-Benutzerauthentifizierung ... Vielen Dank! ! !

Answer 1

刚好在做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;

Answer 2

退出时删除localStorage中的access_token。
可以给Vuex写个插件，每次commit mutation时，更新一下access_token的刷新时间。
下次登录时，判断这个刷新时间，5分钟前了，就认为登录信息过期了。

如果不想把access_token放到localStorage中，可以放在Vuex中，每次都需要重新登录。
重新登录时，你可以没必要都重新生成access_token吧。

Answer 3

刚好总结了一个项目，欢迎star~
【vue+axios】一个项目学会前端实现登录拦截

Answer 4

认证信息以后台为准，不管是登录还是退出都要发送请求，然后根据api返回的结果前端进行操作，如果不记住认证信息用sesionStorage好点

Answer 5

设置路由的拦截器，拦截除了login和logout的所有页面，检查本地变量user是否存在，存在则判断上次校验时间，如果超出1分钟则重新校验。

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
  //var auth = to.matched[0].default.auth;
  //console.log(to);
  if (to.path =="/login" || to.path =="/logout") {
    next();
  }
  else {
    const user = store.state.system.user;
    if(user){
      const time = new Date().getTime();
      if(time-user.lastCheckTime > 60*1000){ // 如果上次检查时间大于1分钟，则调用服务端接口判断session 是否依然有效
        store.dispatch("checkLogin",(error,isLogined)=>{ // 异步检查是否状态有效
          if(error || !isLogined){
            console.warn("登录超时");
            next({'path':'/login',query:{backUrl:to.fullPath}});
          }
          else{
            next();
          }
        });
      }
      else{
        next();
      }

    }
    else{
      console.warn("需要登录");
      next({'path':'/login',query:{backUrl:to.fullPath}});
    }
  }
});