Проект Vue реализует логин пользователя и перенос токена

Vue.js
Проект Vue реализует логин пользователя и перенос токена

Вызов интерфейса входа в систему (сначала уточните, что делать)

В случае, когда фронт и бэкенд полностью разделены, общая идея реализации проверки токенов в проекте Vue выглядит следующим образом:

  1. При первом входе в систему внешний интерфейс вызывает интерфейс входа в систему внутреннего интерфейса и отправляет имя пользователя и пароль.
  2. Серверная часть получает запрос, проверяет имя пользователя и пароль и, если проверка прошла успешно, возвращает токен во внешний интерфейс.
  3. Передний конец получает токен, хранит токен в локальный магазин и Vuex и прыгает на странице маршрутизации.
  4. Каждый раз, когда передняя часть маршрута перехода определяет наличие или отсутствие токена localStroage, чтобы не переходить на страницу входа со страницей перехода на соответствующий маршрут
  5. Каждый раз, когда вы вызываете внутренний интерфейс, вы должны добавить токен в заголовок запроса.
  6. Серверная часть оценивает наличие токена в заголовке запроса. Если токен есть, он получит токен и проверит токен. Если проверка прошла успешно, данные будут возвращены. Если проверка не удалась (например, срок действия токена истек), он вернет 401. Если в заголовке запроса нет токена, он вернет 401.
  7. Если внешний интерфейс получает код состояния 401, очистите информацию о токене и перейдите на страницу входа.
  8. Если интерфейс входа в систему вызывается успешно, токен будет сохранен в localStorage и vuex в функции обратного вызова.

1. Предварительная подготовка

шаблон страницы

<template>  
    <div>    
        <input type="text" v-model="loginForm.username" placeholder="用户名"/>    
        <input type="text" v-model="loginForm.password" placeholder="密码"/>    
        <button @click="login">登录</button>  
    </div>
</template>

логическая реализация

export default {  
    data() { 
        return {
          loginForm: { 
               username: "",
               password: "",
          },    
        };  
     },  
    methods: { 
       ...mapMutations(["changeLogin"]),
       login() {
          let _this = this;

          /////判读账号密码是否输入，没有则alert 出来
          if (this.loginForm.username === "" || this.loginForm.password === "") {
            alert("账号或密码不能为空");      
          } else { 
             this.axios({          
                method: "post",
                url: "/user/login",
                data: _this.loginForm,
              })
                .then((res) => {
                    console.log(res.data);
                    _this.userToken = "Bearer " + res.data.data.body.token;

                    // 将用户token保存到vuex中 
                   _this.changeLogin({   
                       Authorization: _this.userToken,
                    });          
                   _this.$router.push("/home");
                    alert("登陆成功");     
                 })        
                 .catch((error) => { 
                   alert("账号或密码错误");   
                   console.log(error);
                  });
               }    
            },  
          },
};

3. Добавьте токен в index.js в папке магазина.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const store = new Vuex.Store({  
    state: {    // 存储token    
        Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''  
    },  
    mutations: {    // 修改token，并将token存入localStorage    
        changeLogin (state, user) {      
            state.Authorization = user.Authorization;      
            localStorage.setItem('Authorization', user.Authorization);    
        }  }});
    export default store;

Во-вторых, настройте навигационную защиту маршрутизации.

index.js в папке роутера

import Vue from 'vue';
import Router from 'vue-router';
import login from '@/components/login';
import home from '@/components/home';Vue.use(Router);

const router = new Router({  
    routes: [   
            {      path: '/',      redirect: '/login'    },
            {      path: '/login',      name: 'login',      component: login    },
            {      path: '/home',      name: 'home',      component: home    }  ]});
           // 导航守卫
           // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
            router.beforeEach((to, from, next) => { 
             if (to.path === '/login') {    next();  } 
             else {    let token = localStorage.getItem('Authorization');    
             if (token === 'null' || token === '')
             {      next('/login');    } 
             else {      next();    }  
             }
});
export default router;

3. Заголовок запроса и токен добавляются в main.js.

// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(  config => {    
    if (localStorage.getItem('Authorization'))
     {      
        config.headers.Authorization = localStorage.getItem('Authorization');    
     }    
    return config;  },  
    error => {    return Promise.reject(error);  
});

Срок действия токена можно настроить

4. Если внешний интерфейс получает код состояния 401, очистите информацию о токене и перейдите на страницу входа.

localStorage.removeItem('Authorization'); this.$router.push('/login');
Категории