登录模块
需要做路由的守卫，有些模块是需要被保护的，必须登录才能访问。 常见手法是给路由添加 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
importVuefrom'vue'
importVuexfrom'vuex'
importuserfrom'./service/user'Vue.use(Vuex);
exportdefaultnewVuex.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和tokenconst{ code, token } = res.data;if(code) {// 登录成功，修改Vuex中间的登录状态commit('setLoginState',true);// 缓存令牌 tokenlocalStorage.setItem("token", token); }returncode;// 返回code 给下一个 .then 使用}); }, logout({ commit }) {// 清除缓存localStorage.removeItem('token');// 重置状态commit('setLoginState',false); } }});
service文件夹下的服务
// 返回一个 Promises 方便外面使用importaxiosfrom'axios'exportdefault{ login(user) {// 注意：请求地址最好是抽出去统一管理returnaxios.get('/api/login', {params: user }); }}
登录组件中提交事件处理过程
// 提交函数中, dispatch 是调用 actios 中的方法，在通过 commit 发送 mutations 方法修改数据// 注意：this.model 就是传递的数据this.$store.dispatch("login",this.model) .then(code=>{if(code) {// 登录成功后，重定向，如果没有则重定向到首页constpath =this.$route.query.redirect ||'/';this.$router.push(path); } }).catch(error=>{// 有错误发生 或 登录失败consttoast =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/constaxios =require('axios');exportdefaultfunction(vm){// HTTP 请求拦截器axios.interceptors.request.use(config=>{// 在发送请求之前做些什么// 获取token, 并添加到 headers 请求头中consttoken = localStorage.getItem('token');if(token) { config.headers.token = token; }returnconfig; });// HTTP 响应拦截器// 统一处理 401 状态，token 过期的处理，清除token跳转login // 参数 1， 表示成功响应axios.interceptors.response.use(null, err => {// 没有登录或令牌过期if(err.response.status ===401) {// 注销，情况状态和tokenvm.$store.dispatch("logout");// 跳转的登录页vm.$storer.push('/login');// 注意: 这里的 vm 实例需要外部传入}returnPromise.reject(err); });}// 使用拦截器// 1. 引入拦截器文件importinterceptorfrom'./interceptor'// 执行拦截器初始化interceptor(vm);
注销
需要清除 token 缓存的两种情况：
用户主动注销
token 过期
需要做的事情：
清空缓存
重置登录状态
methods: { logout() {this.$route.dispatch('login'); }}
深入理解令牌机制
Bearer Token规范
概念： 描述在HTTP访问OAuth2保护资源时如何使用令牌的规范
特点：令牌就是身份证，无需证明令牌的所有权
具体规定：在请求头中定义Auuthorization：Bearer token
Json Web Token 规范 https://jwt.io
概念：令牌的具体定义方式
规定：令牌由三部分构成 头、载荷、签名
头：包含加密算法、令牌类型等信息
载荷：包含用户信息、签发时间和过期时间等信息
签名：根据头、载荷及秘钥加密得到的哈希串
