Vue中实现用户登录及token验证

Token：

Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌。

Token 可以设置有效期，为了解决在操作过程不能让用户感到 Token 失效这个问题，在服务器端保存 Token 状态，用户每次操作都会自动刷新（推迟） Token 的过期时间——Session 就是采用这种策略来保持用户登录状态的。

Vue中实现t登录及token验证步骤大致如下：

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

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

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面（本项目根据是否记住密码来判断token存储到sessionStorage或 localStorage ）；

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

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

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

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

login.vue

调登录接口成功，在回调函数中将token存储到localStorage、sessionStorage和vuex中。

methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.$api.user.login(values
                        ).then(res => {
                            if (res.data.id_token) {
                                this.$store.commit('login',{token:res.data.id_token,rememberMe:values.rememberMe});
                                this.$store.dispatch('initAccount');
                                this.$router.push('/home');
                            }
                        }).catch(()=>{
                            this.$message.error('用户名或密码错误');
                        })
                    }
                });
            },
        }

store.js

登录成功以及退出登录的token处理

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


Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        token: null,
    },
    mutations: {
        // 登录成功将, token保存在localStorage和sessionStorage中
        login: (state, data) => {
            if (data.rememberMe) {
                localStorage.token = data.token;
            } else {
                sessionStorage.token = data.token;
            }
            state.token = data.token;
        },
        // 退出登录将, token清空
        logout: (state) => {
            localStorage.removeItem('token');
            sessionStorage.removeItem('token');
            state.token = null
        },
    }
})

http.js

请求头部加token以及状态码处理

/**
 * 请求拦截器
 * 每次请求前，如果存在token则在请求头中携带token
 */
instance.interceptors.request.use(
    config => {
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = 'Bearer '+ `${store.state.token}`;
        }
        return config;
    },
    error => Promise.error(error));

// 响应拦截器
instance.interceptors.response.use(
    // 请求成功
    res => Promise.resolve(res),
    // 请求失败
    error => {
        const { response } = error;
        if (response) {
            // 请求已发出，但是不在2xx的范围
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
        }
    });
/**
 * 请求失败后的错误统一处理
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) => {
    // 状态码判断
    switch (status) {
        // 401: 未登录状态，跳转登录页
        case 401:
            toLogin();
            break;
        // 404请求不存在
        case 404:
            message.error('请求的资源不存在',5);
            break;
        default:
            console.log(other);
    }};

注销

至此就完成了一个简单的登录状态了，浏览器关闭后sessionStorage会清空的，所以当用户关闭浏览器再打开是需要重新登录的

当然也可以手动清除sessionStorage，清除动作可以做成注销登录，这个就简单了。

loginOut(){
    // 注销后 清除session信息 ，并返回登录页
    window.sessionStorage.removeItem('data');
    this.common.startHacking(this, 'success', '注销成功！');
    this.$router.push('/index'); 
}