laravel - Idea pengesahan pengguna untuk projek halaman tunggal bahagian hadapan Vue

Question

Persekitaran:

• Belakang: Laravel + Pasport

• Hadapan: Vue 2.0 + Vuex + Vue-router

Soalan:

Bolehkah saya mendapatkan access_token,保存在localStorage中，那么用户退出登录的话需要怎么操作？清空localStorage selepas log masuk di bahagian hadapan? Adakah saya perlu menghantar permintaan lain ke bahagian belakang?

Jika pengguna tidak klik untuk log keluar, tetapi terus menutup pelayar atau tetingkap, localStorage里的access_token akan tetap wujud pada kali berikutnya dia melawat Dalam kes ini, keselamatan tidak begitu baik, bukan?

My access_token sah selama satu tahun, jadi ia akan dijana semula setiap kali saya log masuk. Bagaimana untuk menyelesaikan masalah ini?

Sila berikan saya beberapa idea tentang cara mengendalikan pengesahan pengguna bahagian hadapan...Terima kasih banyak! ! !

Answer 1

Saya kebetulan sedang melakukan pengesahan JWT, menggunakan axios dan penghala untuk pengesahan Ia belum selesai, jadi saya akan menghantar beberapa kod untuk rujukan

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

bahagian penghala:

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

Padam access_token dalam localStorage apabila keluar.
Anda boleh menulis pemalam untuk Vuex dan mengemas kini masa muat semula access_token setiap kali commit mutasi.
Kali seterusnya anda log masuk, tentukan masa muat semula Jika 5 minit yang lalu, maklumat log masuk akan dianggap tamat tempoh. localStorage中的access_token。
可以给Vuex写个插件，每次commit mutation时，更新一下access_token的刷新时间。
下次登录时，判断这个刷新时间，5分钟前了，就认为登录信息过期了。

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

Jika anda tidak mahu meletakkan access_token dalam localStorage, anda boleh meletakkannya dalam Vuex, dan anda perlu log masuk semula setiap kali.
Apabila log masuk semula, tidak perlu menjana semula access_token. 🎜

Answer 3

Saya baru sahaja meringkaskan projek, selamat datang ke bintang~
[vue+axios] Projek untuk mempelajari cara melaksanakan pemintasan log masuk di bahagian hadapan

Answer 4

Maklumat pengesahan tertakluk kepada latar belakang Sama ada anda log masuk atau log keluar, anda mesti menghantar permintaan, dan kemudian mengendalikan bahagian hadapan berdasarkan keputusan yang dikembalikan oleh api adalah lebih baik untuk menggunakan sessionStorage

Answer 5

Tetapkan pemintas penghalaan, pintas semua halaman kecuali log masuk dan log keluar, semak sama ada pengguna pembolehubah setempat wujud, jika wujud, tentukan masa pengesahan terakhir dan sahkan semula jika melebihi 1 minit.

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