vue에서 토큰의 사용법은 무엇입니까

vue의 토큰은 서버 측에서 생성된 문자열로, 클라이언트 요청에 대한 토큰으로 사용됩니다. 사용 방법은 다음과 같습니다. 1. 로컬 저장소 운영 방법을 캡슐화합니다. 2. 저장소를 캡슐화한 후 마운트합니다. 3. "request.js"에 "token"을 넣습니다. 4. 라우터 아래의 "index.vue"에 라우팅 가드를 설정합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, vue3 버전, DELL G3 컴퓨터

vue에서 토큰의 사용법은 무엇입니까? Vue에서 토큰을 사용하는 방법

1. 사용법 이해
1. (세션, 쿠키) 토큰 이해
토큰 소개: 토큰은 클라이언트가 서버에서 자주 데이터를 요청하는 것입니다. 서버는 자주 데이터베이스에 가서 사용자 이름과 비밀번호를 쿼리하고 이를 비교하여 사용자 이름과 비밀번호가 올바른지 확인하고 해당 프롬프트를 제공합니다.
토큰은 서버 측에서 생성된 문자열로, 클라이언트 요청에 대한 토큰으로 사용됩니다. 프런트 엔드가 사용자 이름/비밀번호를 사용하여 서버에 인증을 요청하고 서버 인증이 성공하면 서버는 프런트 엔드에 토큰을 반환합니다. 프런트 엔드는 법적 지위를 증명하기 위해 각 요청마다 토큰을 가져올 수 있습니다. 이 토큰이 서버 측에서 지속되는 경우(예: 데이터베이스에 저장됨) 영구 ID 토큰입니다(유효 기간이 설정되지 않은 경우).

2.token 장점
토큰은 애플리케이션에 의해 완전히 관리되므로 동일 출처 정책을 피할 수 있습니다.
토큰은 CSRF 공격을 피할 수 있습니다.
토큰은 상태 비저장이며 여러 서비스 간에 공유될 수 있습니다.
서버, 빈번한 데이터베이스 쿼리를 줄이고 서버를 더욱 강력하게 만듭니다.
1. 처음 로그인할 때 프런트 엔드는 백엔드의 로그인 인터페이스를 조정하고 사용자 이름과 비밀번호를 보냅니다.

2. 백엔드는 요청을 받고 사용자 이름과 비밀번호를 확인합니다. 성공하면 토큰이 프런트 엔드로 반환됩니다

3. 프런트 엔드는 토큰을 가져와서 localStorage 및 vuex에 저장하고 라우팅 페이지로 이동합니다.前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

二.实际使用
1.封装一个本地缓存的方法
在src下新建一个storage文件夹，文件夹里新建index.vue
代码如下：

// 封装操作localstorage本地存储的方法  模块化

var storage = {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  get(key) {
    return localStorage.getItem(key) != 'undefined' ? JSON.parse(localStorage.getItem(key)) : undefined  },
  getForIndex(index) {
    return localStorage.key(index)
  },
  getKeys() {
    let items = this.getAll()
    let keys = []
    for (let index = 0; index < items.length; index++) {
      keys.push(items[index].key)
    }
    return keys  },
  getLength() {
    return localStorage.length  },
  getSupport() {
    return (typeof (Storage) !== &#39;undefined&#39;)
  },
  remove(key) {
    localStorage.removeItem(key)
  },
  removeAll() {
    localStorage.clear()
  },
  getAll() {
    let len = localStorage.length // 获取长度    let arr = new Array(len) // 定义数据集    for (var i = 0; i < len; i++) {
      // 获取key 索引从0开始
      var getKey = localStorage.key(i)
      // 获取key对应的值
      var getVal = localStorage.getItem(getKey)
      // 放进数组
      arr[i] = {
        &#39;key&#39;: getKey,        &#39;val&#39;: getVal      }
    }
    return arr  }}export default storage

2.封装好storage后，把他挂载到全局组件中
打开src下的main.js
加上一句代码：

Vue.prototype.$storage = storage;

3.在request.js里放入token
至于request是什么，具体可以参考另一篇文档：“Vue如何成功调用一个动态数据接口+解决跨域问题”：该文档链接点击跳转
其中的方法二具体描述了request.js

每次跳转路由前，判断 localStroage（或vuex） 中有无 token，或者是否过期（可以写在封装Axios的请求拦截器中或者router的路由守卫中）
request.js代码如下

import axios from 'axios'import storage from '@/storage'import router from '@/router'// create an axios instance
const service = axios.create({
  baseURL: '/api', // url = base url + request url
  timeout: 5000 // request timeout})// 添加请求拦截器，若token存在则在请求头中加token，不存在也继续请求
service.interceptors.request.use(
  config => {
    // 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带token
    // Authorization是必须的    let tokenInfo = storage.get('TOKEN')
    const token = tokenInfo ? tokenInfo.accessToken : null
    const tokenType = token ? tokenInfo.tokenType.substring(0, 1).toUpperCase() + tokenInfo.tokenType.substring(1) + ' ' : null    if (token && tokenType) {
      config.headers.Authorization = tokenType + token    }
    return config  },
  error => {
    console.log('在request拦截器检查到错误：', error.response)
    return Promise.reject(error)
  })// respone拦截器
service.interceptors.response.use(
  response => {
    return response  },
  error => {
    // 在status不正确的情况下，判别status状态码给出对应响应    if (error.response) {
      console.log('在respone拦截器检查到错误：')
      switch (error.response.status) {
        case 204:
          error.response.data.error = '204:No Content（没有内容）'
          break
        case 401:
          // 可能是token过期，清除它
          storage.remove('tokenInfo')
          location.reload() // 刷新页面，触发路由守卫
          error.response.data.error = '401:Unauthorized（未经授权）'
          break
        case 403:
          error.response.data.error = '403:Forbidden（被禁止的）'
          break
        case 500:
          error.response.data.error = '500:服务器内部错误'
          break
        default:          return error      }
      return Promise.reject(error.response.data.error)
    }

    return Promise.reject(error)
  })export default service

4.在路由，router下的index.vue里设置路由守卫
4. 프론트 엔드는 해당 경로로 점프하고, localStroage에 토큰이 있는지 판단하고, 없으면 로그인 페이지로 점프하고, 그렇다면 해당 라우팅 페이지로 점프합니다

5. 백엔드 인터페이스에서는 요청 헤더에 토큰을 추가해야 합니다

6. 백엔드는 요청 헤더에 토큰이 있는지 확인합니다. 토큰이 있으면 토큰을 가져와서 확인합니다. 데이터가 반환됩니다. 확인이 실패하면(예: 토큰 만료) 401이 반환됩니다. 요청 헤더에 토큰이 없으면 7. 프런트 엔드가 상태 코드를 가져오면 401도 반환됩니다. 401, 토큰 정보를 지우고 로그인 페이지로 이동합니다

🎜2. 실제 사용🎜🎜1.로컬 캐시 캡슐화 방법🎜 새 저장 폴더 만들기 src 아래 폴더에 새 index.vue🎜를 생성하고 코드는 다음과 같습니다. 🎜

import Vue from 'vue'import Router from 'vue-router'import Login from '@/views/login';import Main from '@/main/index';import tip1 from '@/views/tip1';import tip2 from '@/views/tip2';import tip3 from '@/views/tip3';import storage from '@/storage'Vue.use(Router)const routes = [{
    path: '/',
    name: 'Login',
    // redirect: '/login',
    component: Login,  },  {
    path: "/login",
    component: Login,  },  {
    path: '/Main',
    component: Main,
    children: [{
        path: '/',
        name: 'Tip1',
        component: tip1      },      {
        path: '/tip1',
        name: 'Tip1',
        component: tip1      },      {
        path: '/tip2',
        name: 'Tip2',
        component: tip2,
        meta: {
          requireAuth: true
        }
      },      {
        path: '/tip3',
        name: 'Tip3',
        component: tip3      },    ]
  }]const router = new Router({
  routes})// 设置路由守卫，在进页面之前，判断有token，才进入页面，否则返回登录页面
router.beforeEach((to, from, next) => {
  // 默认requiresAuth为false才不需要登录，其他都要
  // to.matched.some(r => r.meta.requireAuth) or to.meta.requiresAuth  if (to.matched.some(r => r.meta.requireAuth) !== false) {
    let tokenInfo = storage.get('TOKEN')
    if (tokenInfo) {
      console.log("有token")
      next();

    } else {
      storage.remove('TOKEN')
      next({
        path: "/login",
        query: {
          redirect: to.fullPath        } // 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由      });
    }

  } else {
    next(); //如果无需token,那么随它去吧  }});//暴露router实例export default router
// 1.将调用登录接口成功以后，把后端传过来的token放入本地缓存
// 2.路由跳转之前执行路由守卫，实例化一个Router对象，使用该对象内置方法beforeEach，在路由跳转前判断该页面是否设置了token，获取token
// 如果有token，next()继续执行路由跳转
// 如果没有token，跳转去登录界面

🎜2. 저장소를 캡슐화한 후 전역 구성 요소에 마운트🎜 src 아래의 main.js를 엽니다. 🎜 코드 한 줄을 추가하세요. 🎜

meta: {
          requireAuth: true
        }

🎜3. request.js에 토큰을 넣으세요🎜 요청이 무엇인지에 대한 자세한 내용은 다른 문서를 참조하세요. "Vue가 동적 데이터를 성공적으로 호출하는 방법 인터페이스 + 도메인 간 문제 해결" ：이 문서 링크를 클릭하여 점프하세요🎜🎜 두 번째 방법은 각각 전에 request.js🎜🎜를 구체적으로 설명합니다. 점프 경로, localStroage(또는 vuex)를 결정합니다. 토큰이 있는지 또는 만료되었는지 여부(Axios 또는 라우터의 라우팅 가드를 캡슐화하는 요청 인터셉터에 기록될 수 있음) 🎜 request.js 코드는 다음과 같습니다. 🎜rrreee🎜4. 라우팅에서 라우터는 index.vue에 라우팅 가드를 설정합니다.🎜 전체 인덱스 코드는 다음과 같습니다. 🎜rrreee🎜라우팅 가드가 필요한 페이지입니다. 그에게 매개변수를 추가하기만 하면 됩니다. 🎜rrreee는 학습을 권장합니다: "🎜vue 비디오 튜토리얼🎜" 🎜

위 내용은 vue에서 토큰의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!