springboot +vue实现token登录1之vue的token存储

0.写在前面

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

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

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

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

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

1、登录成功后将后台返回的token和user存在store

  login() {  
       // 组件中使用get方法
       var url='api/user/login';
        axios({ method: "get",
                        url: url,
                        params: {
                          name: this.name,
                          password: this.password,          
                          }
                        }                                  
            ).then((response) => {
               console.log(response)
                this.$message({ message: "登录成功", type: 'success' });
                //将后台返回的token和user存在store
                this.$store.commit('SET_TOKEN', res.data.data.token)
                this.$store.commit('GET_USER', JSON.stringify(res.data.data))
               if(response.data.data){ this.$router.push({name:'HelloWorld',params:{name: this.name}});}
               else{
                 this.password="";
                 alert("账号或者密码出错,请重新输入")
               }
             
               
            }).catch((error) => {
                console.log(error)
            }) 
    },

2、VUEX store配置存储token

目录结构

 

index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  modules: {
    app,
    user,
  },
});
 
export default store

user.js文件,包含需要保存的用户信息

const user = {
    state: {
        user: window.sessionStorage.getItem('user'),
        token: window.sessionStorage.getItem('token')
    },
 
    mutations: {
        //将token保存到sessionStorage里，token表示登陆状态
        SET_TOKEN: (state, data) => {
            state.token = data
            window.sessionStorage.setItem('token', data)
        },
        //获取用户名
        GET_USER: (state, data) => {
            // 把用户名存起来
            state.user = data
            window.sessionStorage.setItem('user', data)
        },
        //登出
        LOGOUT: (state) => {
            // 登出的时候要清除token
            state.token = null
            state.user = null
            window.sessionStorage.removeItem('token')
            window.sessionStorage.removeItem('user')
        }
    },
    actions: {
 
    }
};
 
export default user;

 

3、将token加入axios请求头 main.js

import store from './store';
// 创建axios实例
var instance = axios.create({    timeout: 1000 * 12});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
 * 请求拦截器
 * 每次请求前，如果存在token则在请求头中携带token
 */
instance.interceptors.request.use(
    config => {
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
        const token = store.state.user.token;
        token && (config.headers.common['token']  = token);
        return config;
    },
    error => Promise.error(error))
//在请求头中携带token
    axios.defaults.headers.common['token'] =store.state.user.token;

4、获取

this.$store.state.user.token
//获取当前登录人
this.$store.state.user.user