文档章节

Vue 项目 login 模块

o
 osc_iazh5wbp
发布于 2019/12/01 19:47
字数 970
阅读 5
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

登录模块

需要做路由的守卫,有些模块是需要被保护的,必须登录才能访问。 常见手法是给路由添加 meta:{ auth:true } 来做标识,表示需要做认证。

// 路由守卫
router.beforeEach((to, from, next) => {
    // 判断要进入的路由是否需要认证
    if(to.meta.auth) {
        // 通过token令牌机制判断是否已经登录
        const token = localStorage.getItem('token');
        if (token) {
            next(); // 如果登录则放行,进入路由
        } else {
        	// 跳转,并携带重定向地址
            next({
               path: '/login', 
               query: {
                   redirect: to.path 
               }
            });
        }
    } else {
        // 不需要验证的模块,直接放行
        next();
    }
});

在 Vuex 中存储登录状态 isLogin

import Vue from 'vue'
import Vuex from 'vuex'
import user from './service/user'

Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        isLogin: localStorage.getItem('token') ? true : false
    },
    mutations: {
        setLoginState(state, bool) {
            state.isLogin = bool;
            // true 表示登录,false 表示注销
        }
    },
    actions: {
        login({commit}, user) {
            // 发起登录请求,请求都拆分出去 service 文件夹中
            // 使用 service 的请求方法
            user.login(user).then(res => {
                // 从 res.data 中解构数据,code和token
                const { code, token } = res.data;
                if (code) {
                    // 登录成功,修改Vuex中间的登录状态
                    commit('setLoginState', true);
                    // 缓存令牌 token
                    localStorage.setItem("token", token);
                }
                return code; // 返回code 给下一个 .then 使用
            });
        },
        logout({ commit }) {
            // 清除缓存
            localStorage.removeItem('token');
            // 重置状态
            commit('setLoginState', false);
        }
    }
});

service文件夹下的服务

// 返回一个 Promises 方便外面使用
import axios from 'axios'
export default {
    login(user) {
    	// 注意:请求地址最好是抽出去统一管理
        return axios.get('/api/login', { 
        	params: user 
        });
    }
}

登录组件中提交事件处理过程

// 提交函数中, dispatch 是调用 actios 中的方法,在通过 commit 发送 mutations 方法修改数据
// 注意:this.model 就是传递的数据
this.$store.dispatch("login", this.model)
	.then(code => {
        if (code) {
            // 登录成功后,重定向,如果没有则重定向到首页
            const path = this.$route.query.redirect || '/';
            this.$router.push(path);
        }
	}).catch(error => {
        // 有错误发生 或 登录失败
        const toast = this.$createToast({
            time: 2000,
            text: error.message || error.response.data.message || "登录失败",
            type: "error"
        });
        toast.show();
	});

需要考虑的检查点

  • 如何守卫路由
  • 如何进行异步操作
  • 如何保存登录状态
  • 如何模拟接口

HTTP 拦截器

新建 interceptor.js 文件,用于拦截请求和响应

// token 过期导致请求失败的情况可能出现在项目的任何地方,可以通过响应拦截统一处理
// 拦截器的作用:是对接口做一层保护,表示所有的接口都会带有令牌 token  
// 可以查看 axios 的文档 : http://www.axios-js.com/zh-cn/docs/
const axios = require('axios');

export default function(vm) {
	// HTTP 请求拦截器
    axios.interceptors.request.use(config => {
        // 在发送请求之前做些什么
        // 获取token, 并添加到 headers 请求头中
        const token = localStorage.getItem('token');
        if (token) {
            config.headers.token = token;
        }
        return config;
    });
    
    // HTTP 响应拦截器
    // 统一处理 401 状态,token 过期的处理,清除token跳转login 
    // 参数 1, 表示成功响应
    axios.interceptors.response.use(null, err => {
        // 没有登录或令牌过期
        if (err.response.status === 401) {
            // 注销,情况状态和token
            vm.$store.dispatch("logout");
            // 跳转的登录页
            vm.$storer.push('/login');
            // 注意: 这里的 vm 实例需要外部传入
        }
        return Promise.reject(err);
    });
}

// 使用拦截器
// 1. 引入拦截器文件
import interceptor from './interceptor'
// 执行拦截器初始化
interceptor(vm);

注销

  • 需要清除 token 缓存的两种情况:
    1. 用户主动注销
    2. token 过期
  • 需要做的事情:
    • 清空缓存
    • 重置登录状态
methods: {
    logout() {
        this.$route.dispatch('login');
    }
}

深入理解令牌机制

  • Bearer Token规范

    • 概念: 描述在HTTP访问OAuth2保护资源时如何使用令牌的规范
    • 特点:令牌就是身份证,无需证明令牌的所有权
    • 具体规定:在请求头中定义Auuthorization:Bearer token
  • Json Web Token 规范 https://jwt.io

    • 概念:令牌的具体定义方式
    • 规定:令牌由三部分构成 头、载荷、签名
    • 头:包含加密算法、令牌类型等信息
    • 载荷:包含用户信息、签发时间和过期时间等信息
    • 签名:根据头、载荷及秘钥加密得到的哈希串

滴滴 Cube-UI 库 精致的移动端组件库

Cube-UI 库地址

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.3K
6
WSGI Web服务器--UV-Web

uv-web是一个轻量级的支持高并发的WSGI Web服务器,基于libuv构建,部分代码源于开源项目bjoern,本质是python的C扩展,所以适用于部署绝大部分 python web应用(如 Django) 特性 兼容 HTTP 1...

Jone.x
2013/03/04
1.7K
0
购物车开源模块--FishCart

FishCartSQL 是一个功能齐全的购物车开源模块,可以在里面增加一些自己喜欢的页面。里面有许多高级特性,如:用户记录、即时交易、多语言支持、信用卡处理和单服务吕部署多个在线商店,里面用...

匿名
2013/03/27
1.7K
0
简单邮件联系页面带飞信通知模块

一个简单的“发邮件给我”的页面,支持HTML邮件编辑,支持附件发送,支持飞信短信提醒。里面有很多可以定制的地方,包括邮件的发送方式、前端页面的设计等等。 如果你也跟我一样喜欢通过邮件...

leehorsley
2012/10/22
1.6K
0
简单CMS

主要修改: 1)增加文章模块,文章列表显示在首页和单品页中; 2)增加店铺模块,店铺显示在首页和瀑布流页中; 3)增加网站地图模块; 4)增加sitemap模块; 5)增加第三方淘宝登录功能; ...

简单CMS
2012/12/25
4.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

低代码平台,让企业开发不再是难事

近几年,企业面临数字化转型带来的压力,为了快速适应行业变化和赶超竞争对手,在高级技术人才缺乏的情况下,低代码开发获得了企业的青睐。 何为低代码开发,低代码开发平台(LCDP)是无需编...

osc_veyfyz58
12分钟前
0
0
【科创人独家】华旦天使张洁:风口是创业者的造物,投资本质是件农活

在投资界活跃着一批乘风破浪的姐姐们,江湖人敬称一声“花姐”的华旦天使投资创始人张洁是个中代表:言谈飒爽,举止利落,洞察力十足。 技术背景创业者 宜:创新、洞察 忌:轴、轻视销售 科创...

osc_lc4icfkt
13分钟前
0
0
霍尼韦尔(中国)推出数字化劳动力管理解决方案套件,以支持健康合规性和远程操作

休斯敦霍尼韦尔(中国)近期宣布了一个完整的模块化软件解决方案,以帮助工业公司在员工返回工作场所时强制遵守关键的健康和安全要求,包括体温检查和自动进入管理流程,更多信息尽在振工链。...

osc_ju8o7gji
14分钟前
0
0
萤石云摄像头调整码流,画面模糊的处理

近期在将萤石云合并到监控主机时发现画面只有750左右,原以为是海康威视主机的问题,必竟两个产品系列,后我又购买了萤石云主机进行测试还是一样。经过与售后沟通他们给出了调整画面的方案,...

osc_5h5udyht
16分钟前
0
0
Oracle 锁排查SQL

查询锁SQL或ASH报告 select sql_text from v$sql where hash_value in (select sql_hash_value from v$session where sid in (select session_id from v$locked_object)); 查询TX锁 set line......

osc_qgfjs4a5
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部