javascript - Masalah logik pemintasan masuk?

Question

Sekarang saya masukkan kata laluan akaun saya, penyemak imbas menghantar permintaan, dan token berjaya dikembalikan;

Apa yang saya ingin tanya ialah: Patutkah saya meletakkan token ini dalam kuki atau dalam localStorage?

Selain itu, bagaimana untuk menangani pemintasan log masuk di halaman lain?

Adakah perlu untuk menentukan sama ada terdapat token dalam kuki atau localStorage dan kemudian melepaskannya?
(Jika ya, orang lain hanya boleh mencipta token dan melepaskannya)

Dan bagaimana menggunakan tempoh tamat masa untuk pemulangan yang berjaya Adakah ia diletakkan di dalam kuki?

Atau pemikiran saya salah?

Answer 1

Selepas pengesahan pengguna berjaya, nilai token yang dikembalikan oleh pelayan biasanya disimpan dalam localStorage pada bahagian hadapan.
Setiap kali anda membuat permintaan, hanya letakkan token dalam pengepala permintaan.
Yang berikut mengambil axios sebagai contoh: token 值，前端一般存在 localStorage 里。
每次发出请求的时候，把该 token 放在请求头即可。
下面以 axios为例：

// http request 拦截器
api.interceptors.request.use(config => {
  if (window.localStorage.ACCESS_TOKEN) {
    config.headers.Authorization = 'Bearer ' + window.localStorage.ACCESS_TOKEN
  }
  return config
}, error => {
  return Promise.reject(error)
})

// http response 拦截器
api.interceptors.response.use(response => {
  if (response.status === 401) { // token过期
    window.localStorage.removeItem('ACCESS_TOKEN')
    router.replace({
      path: '/user/login',
      query: {
        redirect: router.currentRoute.fullPath
      }
    })
  }
  return response
}, error => {
  return Promise.reject(error)
})

页面的登录拦截以 vue.js 的 vue-router 为例：

// 导航钩子
router.beforeEach((to, from, next) => {
  // 检查登录状态
  store.commit(types.CHECKOUT_LOGIN_STATUS)
  if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要登录权限
    if (window.localStorage.ACCESS_TOKEN) { // 如果本地存在 access_token，则继续导航
      next()
    } else {
      if (name === 'userLogin') {
        next()
      } else {
        next({ // 登录成功后，自动跳转到之前的页面
          path: '/user/login',
          query: {
            redirect: to.fullPath
          }
        })
      }
    }
  } else {
    next()
  }
})

---

另外 token 值一般是很难伪造的，因为每次请求都会向后端去验证该 token rrreee

Pemintasan log masuk halaman mengambil vue-router vue.js sebagai contoh: 🎜 rrreee

---

🎜Selain itu, nilai token biasanya sukar untuk dipalsukan, kerana setiap permintaan akan mengesahkan kesahihan nilai token ke bahagian belakang. 🎜

Answer 2

Adalah disyorkan untuk menggunakan setCookie dalam permintaan yang dikembalikan oleh pelayan untuk menetapkan token, dan menetapkannya kepada httpSahaja Bawa kuki dalam permintaan seterusnya, dan kemudian tentukan status berdasarkan panggilan balik pelayan.