laravel - Idées d'authentification utilisateur pour les projets front-end Vue d'une seule page

Question

Environnement :

• Backend : Laravel + Passeport

• Frontend : Vue 2.0 + Vuex + Vue-router

Question :

Puis-je obtenir access_token,保存在localStorage中，那么用户退出登录的话需要怎么操作？清空localStorage après m'être connecté sur le front-end ? Dois-je envoyer une autre demande au backend ?

Si l'utilisateur ne clique pas pour se déconnecter, mais ferme directement le navigateur ou la fenêtre, localStorage里的access_token existera toujours lors de sa prochaine visite. Dans ce cas, la sécurité n'est pas très bonne, n'est-ce pas ?

Mon access_token est valable un an, il sera donc régénéré à chaque connexion. Comment résoudre ce problème ?

Veuillez me donner quelques idées sur la façon de gérer l'authentification des utilisateurs frontaux... Merci beaucoup ! ! !

Answer 1

Je fais juste la vérification JWT, en utilisant axios et router pour la vérification. Elle n'est pas encore terminée, je publierai donc une partie du code pour référence

.

partie 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;

partie routeur :

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

Supprimez access_token dans localStorage en quittant.
Vous pouvez écrire un plug-in pour Vuex et mettre à jour le temps d'actualisation de access_token à chaque fois que commit mutation.
La prochaine fois que vous vous connecterez, déterminez l'heure d'actualisation. Si c'est il y a 5 minutes, les informations de connexion seront considérées comme expirées. localStorage中的access_token。
可以给Vuex写个插件，每次commit mutation时，更新一下access_token的刷新时间。
下次登录时，判断这个刷新时间，5分钟前了，就认为登录信息过期了。

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

Si vous ne souhaitez pas mettre access_token dans localStorage, vous pouvez le mettre dans Vuex et vous devez vous reconnecter à chaque fois.
Lorsque vous vous reconnectez, il n'est pas nécessaire de régénérer le access_token. 🎜

Answer 3

Je viens de résumer un projet, bienvenue sur star~
[vue+axios] Un projet pour apprendre à implémenter l'interception de connexion sur le front-end

Answer 4

Les informations d'authentification dépendent de l'arrière-plan. Que vous vous connectiez ou vous déconnectiez, vous devez envoyer une demande, puis utiliser le front-end en fonction des résultats renvoyés par l'API. Si vous ne vous souvenez pas des informations d'authentification, cela est nécessaire. est préférable d'utiliser sessionStorage

Answer 5

Définissez un intercepteur de routage, interceptez toutes les pages sauf la connexion et la déconnexion, vérifiez si la variable locale user existe, si elle existe, déterminez l'heure de la dernière vérification et revérifiez si elle dépasse 1 minute.

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