登录模块
需要做路由的守卫，有些模块是需要被保护的，必须登录才能访问。 常见手法是给路由添加 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 缓存的两种情况：
- 用户主动注销
- token 过期
- 需要做的事情：
- 清空缓存
- 重置登录状态
methods: { logout() { this.$route.dispatch('login'); } }
深入理解令牌机制
- Bearer Token规范
- 概念： 描述在HTTP访问OAuth2保护资源时如何使用令牌的规范
- 特点：令牌就是身份证，无需证明令牌的所有权
- 具体规定：在请求头中定义Auuthorization：Bearer token
- Json Web Token 规范 https://jwt.io
- 概念：令牌的具体定义方式
- 规定：令牌由三部分构成 头、载荷、签名
- 头：包含加密算法、令牌类型等信息
- 载荷：包含用户信息、签发时间和过期时间等信息
- 签名：根据头、载荷及秘钥加密得到的哈希串