壹周回顾


哈喽,又是元气满满的一个周一,又与大家见面了,周末就是团圆节了,正好咱们的前后端也要团圆了,为什么这么说呢,因为以后的开发可能就需要前后端一起了,两边也终于会师了,还有几天Vue系列就基本告一段落了,大家也好好加油鸭,今天将的内容呢,其实细心的你看到题目应该就能大家猜到了,前提是一直看本系列的小伙伴们,包括之前.net
core部分,这里先简单说下上周咱们都说了什么:

周一:《十九║Vue基础: 样式动态绑定+生命周期
<https://www.cnblogs.com/laozhang-is-phi/p/9611632.html>》重点说了下 Vue 开发中的八个生命周期
,这个是一个重点,希望大家可以多看看,这个在以后的开发中会经常遇到;

周二:《二十║Vue基础终篇:组件详解+项目说明
<https://www.cnblogs.com/laozhang-is-phi/p/9622031.html>》重点说了下组件
的使用,包括定义、传值、使用等等,这个更是重中之重,组件的使用在 Vue 的开发中必不可少;

周三:《二十一║Vue实战:开发环境搭建【详细版】
<https://www.cnblogs.com/laozhang-is-phi/p/9629026.html>》详细的说了下开发环境
的搭建,不仅讲了如何搭建,还详细的说明了每一个工具、插件的使用意义;

周四:《二十二║Vue实战:个人博客第一版(axios+router)
<https://www.cnblogs.com/laozhang-is-phi/p/9640974.html>
》根据周三搭建的环境,第一次创建了咱们第一版的个人博客,封装了axios ,第一次连接上了咱们之前的 .net core api;

周五:《二十三║Vue实战:Vuex 其实很简单
<https://www.cnblogs.com/laozhang-is-phi/p/9647008.html>》通过一个小 DEMO 说明了 Vuex
是如何对我们的 Vue 实行状态化管理的,让大家对其使用有了一定的了解,为在以后的大项目中使用打下基础;

周五的时候,咱们通过对表单的组件化,来说明了 vuex 的存在意义,今天咱们还是会用到这个 vuex ,而且还会配合着 .net core
api,到底是什么呢?请看今天的讲解。

注意:周四的时候,只写了个人博客的首页,周末的时候,已经把详情页更新了,大家可以自行去 Git 查看,文末有地址

 

 

零、今天要完成右下角粉色区块的部分

 

 

一、如何实现权限验证的过程

大家一定还记得之前在 .net core api 系列文章中《框架之五 || Swagger的使用 3.3 JWT权限验证【修改】
<https://www.cnblogs.com/laozhang-is-phi/p/9511869.html>》,咱们通过对 JWT
的讲解,实现了对接口的验证,大家可以去了解一下,当时因为是没有前端,所以咱们就直接用的 Swagger
接口文档来手动设置的权限验证,当时群里有很多小伙伴对这个不是很明白,我也是简单说了下,通过手动在 swagger 中输入Header ,变成每次 vue 的
axios 请求的 Header 中添加 Token,这个 Token
就是咱们手动配置的那个,因为当时没有前后端搭配,所以只是比较笼统的说了下这个流程,今天呢,就重点来说下这个授权登录验证,也为下边的管理后台铺路,这里配合
Vue 前端,再仔细讲讲是如何实现前后端同时验证的:



 

上图中说的也是很详细了,主要分为两个验证:


1、前端验证(蓝色部分),用户访问一个页面,首先判断是否需要验证登录,比如管理后台,或者订单系统的下单页(首页和详情页自然是不需要用户登录的,购物车和订单等必须登录,当然有些游客也可以购买的除外),然后去验证是否存在
Token,存在就添加到 axios 的 Header 中去请求后端 API,反之则去登录页登录;

2、后端验证(绿色部分),这个就是咱们之前在说 .net core api 的时候说到的 JWT 授权验证,根据当前前端 axios 请求中传来的
Token ,解析出是否被篡改,以及是否会相应的权限,这样就可以进一步返回数据了;

这个时候大家一定会有疑惑了,既然现在每一个接口都定义了权限,为什么要俩边都需要验证,只需要后端 api 一个验证不就行了,何必这么麻烦?我认为是这样的:

首先前端验证的主要目的是:通过手动配置,可以让用户去主动获取 Token
,不用每次都去获取,而且也减轻了后端请求的次数,总不能是先去发送请求,再判断当前页面是否需要登录吧,嗯,总结来说,

前端是为了页面级登录,后端是为了接口级验证,而且也是想把 vue 前端工程化的思想。

 

二、结合API设计登录页 —— 实现后端验证

1、引入 ElementUI 样式框架

 因为之后需要一个管理后台,所以考虑着增加一个框架,目前比较流行的就是 ElementUI 和 IView,今天咱们先说一下引用 ElementUI

首先,在项目中 执行 npm install,初始化以后,在 node_modules 中查看是否存在 element-ui 文件夹,如果没有,则执行
npm i element-ui -S
然后就可以看到项目中已经成功安装 elementui 了



 

然后、在项目的入口配置文件 main.js 中,引用
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css
' Vue.use(ElementUI)
如果项目没有报错,到此则安装成功。 

 

2、添加统一登录页面

第一、在 src 的 views 文件夹内,添加 Login.vue 页面,并添加内容:
<template> <el-row type="flex" justify="center"> <el-form ref="loginForm"
:model="user" :rules="rules" status-icon label-width="50px"> <el-form-item
label="账号" prop="name"> <el-input v-model="user.name"></el-input>
</el-form-item> <el-form-item label="密码" prop="pass"> <el-input v-model="
user.pass" type="password"></el-input> </el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-upload" @click="login">登录</el-button>
</el-form-item> </el-form> </el-row> </template> <script> export default {
methods: { login() {//使用elementui validate验证 this
.$refs.loginForm.validate(valid => { if (valid) {//这里在下边会改写成登录信息 感谢 @风格不同
<https://www.cnblogs.com/zhoudidi/> 提醒注释错误问题 if (this.user.name === "admin" &&
this.user.pass === "123") { this.$notify({ type: "success", message: "欢迎你," +
this.user.name + "!", duration: 3000 }); this.$router.replace("/"); } else {
this.$message({ type: "error", message: "用户名或密码错误", showClose: true }); } } else
{return false; } }); } }, data() { return { user: {},//配合页面内的 prop 定义数据 rules:
{//配合页面内的 prop 定义规则 name: [{ required: true, message: "用户名不能为空", trigger: "blur"
}], pass: [{ required:true, message: "密码不能为空", trigger: "blur" }] } }; } };
</script>
添加路由后,测试页面是否可行



 

3、配合后台登录请求

完善  BlogController.cs 页面,稍微调整了下接口,和之前的没有差别,并增加权限验证



 
/// <summary> /// 获取博客列表 /// </summary> /// <param name="id"></param> ///
<param name="page"></param> /// <param name="bcategory"></param> ///
<returns></returns> [HttpGet] public async Task<object> Get(int id, int page =
1, string bcategory = "技术博文") { int intTotalCount = 6; int TotalCount = 1; List
<BlogArticle> blogArticleList =new List<BlogArticle>(); if
(redisCacheManager.Get<object>("Redis.Blog") != null) { blogArticleList =
redisCacheManager.Get<List<BlogArticle>>("Redis.Blog"); } else { blogArticleList
=await blogArticleServices.Query(a => a.bcategory == bcategory);
redisCacheManager.Set("Redis.Blog", blogArticleList, TimeSpan.FromHours(2)); }
TotalCount= blogArticleList.Count() / intTotalCount; blogArticleList =
blogArticleList.OrderByDescending(d => d.bID).Skip((page -1) *
intTotalCount).Take(intTotalCount).ToList();foreach (var item in
blogArticleList) {if (!string.IsNullOrEmpty(item.bcontent)) { int totalLength =
500; if (item.bcontent.Length > totalLength) { item.bcontent =
item.bcontent.Substring(0, totalLength); } } } var data = new { success = true,
page = page, pageCount = TotalCount, data = blogArticleList }; return data; } //
GET: api/Blog/5 /// <summary> /// 获取详情 /// </summary> /// <param
name="id"></param> /// <returns></returns> [HttpGet("{id}", Name = "Get")]
public async Task<object> Get(int id) { var model = await
blogArticleServices.getBlogDetails(id);var data = new { success = true, data =
model };return data; }
 

调整 LoginController.cs 的获取 Token 方法:
/// <summary> /// 获取JWT的方法 /// </summary> /// <param name="id">id</param> ///
<param name="sub">角色</param> /// <returns></returns> [HttpGet] [Route("Token")]
public JsonResult GetJWTStr(string name, string pass) { string jwtStr = string
.Empty;bool suc = false; //这里就是用户登录以后,通过数据库去调取数据,分配权限的操作 //这里直接写死了 if (name == "
admins" && pass == "admins") { TokenModelJWT tokenModel = new TokenModelJWT();
tokenModel.Uid= 1; tokenModel.Role = "Admin"; jwtStr =
JwtHelper.IssueJWT(tokenModel); suc= true; } else { jwtStr = "login fail!!!"; }
var result = new { data = new { success = suc, token = jwtStr } }; return
Json(result); }
 

4、修改 前端的 Login.vue 页面的登录方法,获取到 Token ,并把其保存到 Vuex 中

 
<template> <el-row type="flex" justify="center"> <el-card v-if="isLogin">
欢迎:admins<br> <br> <el-button type="primary" icon="el-icon-upload" @click="
loginOut">退出登录</el-button> </el-card> <el-form v-else ref="loginForm" :model="
user" :rules="rules" status-icon label-width="50px"> <el-form-item label="账号"
prop="name"> <el-input v-model="user.name"></el-input> </el-form-item>
<el-form-item label="密码" prop="pass"> <el-input v-model="user.pass" type="
password"></el-input> </el-form-item> <el-form-item> <el-button type="primary"
icon="el-icon-upload" @click="login">登录</el-button> </el-form-item> </el-form>
</el-row> </template> <script> export default { methods: { login: function() {
let that= this; that.$store.commit("saveToken", "");//清掉 token this
.$refs.loginForm.validate(valid => { if (valid) { this.$api.get( "Login/Token",
{ name: that.user.name, pass: that.user.pass }, r=> { if (r.data.success) { var
token = r.data.token; that.$store.commit("saveToken", token);//保存 token this
.$notify({ type:"success", message: "欢迎你," + this.user.name + "!", duration:
3000 }); console.log(that.$store.state.token); this.$router.replace("/"); } else
{this.$message({ type: "error", message: "用户名或密码错误", showClose: true }); } }
); }else { return false; } }); }, loginOut(){ this.isLogin=false; this
.$store.commit("saveToken", "");//清掉 token } }, data() { return { isLogin:false
, user: {}, rules: { name: [{ required:true, message: "用户名不能为空", trigger: "blur"
}], pass: [{ required:true, message: "密码不能为空", trigger: "blur" }] } }; },
created() {if (window.localStorage.Token&&window.localStorage.Token.length>=128
){this.isLogin=true; } } }; </script>
 

5、修改 vuex 仓库,把 token 存进store中
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store =
new Vuex.Store({ // 初始化的数据 state: { formDatas: null, token: "1" }, //
改变state里面的值得方法 mutations: { getFormData(state, data) { state.formDatas = data;
}, saveToken(state, data) { state.token= data; window.localStorage.setItem("
Token", data);//就是这里,保存到了 localStorage 中 } } }); // 输出模块 export default store;
 

6、这个时候要修改下之前我们封装的 http.js 方法,因为当时我们过滤掉了失败的方法,这里要打开下,大家自行修改下



这个时候,我们再登录的话,已经发生变化

 

这个时候大家可以看到,我们成功的登录了(右上角有欢迎提示),然后 token 也成功的保存到 stroe/localStorage 里(下边控制台输出),

因为我们在博客页增加了权限,虽然我们是用的 admin 账号,但是 Header 中还没有添加Token,所以现在还是 401,那如何才能有效的增加请求
Header 呢,请往下看,权限验证前端部分。

 

 

三、实现一:登录拦截验证——路由拦截

 1、修改 router.js 路由,实现按需登录

在需要登录的地方,增加登录要求字段,

然后增加 beforeEach 钩子函数(这里有一个问题,只能获取到本地缓存数据,无法获取 Vuex ,正在研究中)
import Vue from "vue"; import Router from "vue-router"; import Home from "
./views/Home.vue"; import FormVuex from "./views/FormVuex.vue"; import Content
from "./views/content"; import Login from "./views/Login"; import store from "
./store"; Vue.use(Router); const router = new Router({ mode: "history", base:
process.env.BASE_URL, routes: [ { path:"/", name: "home", component: Home,
meta: { requireAuth:true // 添加该字段,表示进入这个路由是需要登录的 } }, { path: "/Vuex", name: "
Vuex", component: FormVuex }, { path: "/Content/:id", name: "Content",
component: Content }, { path:"/Login", name: "Login", component: Login }, {
path:"/about", name: "about", // route level code-splitting // this generates a
separate chunk (about.[hash].js) for this route// which is lazy-loaded when the
route is visited. component: () => import(/* webpackChunkName: "about" */ "
./views/Form.vue") } ] }); router.beforeEach((to, from, next) => { if
(to.meta.requireAuth) {// 判断该路由是否需要登录权限 if
(window.localStorage.Token&&window.localStorage.Token.length>=128) {// 通过vuex
state获取当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect:
to.fullPath}// 将跳转的路由path作为参数,登录成功后跳转到该路由 }) } } else { next(); } }) export
default router;
 2、修改 http.js 封装方法,自动在请求中把 Token 添加到 Header 中

上边的路由设置,仅仅是对 Token 进行判断,还没有添加到 Header 里,更没有进行验证

注意:目前是用的 localStorage 本地存储的方法(这一点是受到微信小程序的启发),

但是直接在 router.js 中直接获取 store 的token属性,取不到,有知道的小伙伴请留言 

更新:经过群里小伙伴的提醒 还有楼下评论席@路遥心安 <https://www.cnblogs.com/xu-jin/> 的提醒,这里不是取不到,而是必须用
localstoreage 来赋值,因为 vuex 只是一个分发管理状态的作用,并没有本地保存的功能,

  

 
import store from "../store"; import router from "../router.js"; // 配置API接口地址
var root = "http://localhost:58427/api"; var root1 = "
http://123.206.33.109:8018/api"; // 引用axios var axios = require("axios"); //
自定义判断元素类型JS function toType(obj) { return {}.toString .call(obj) .match(
/\s([a-zA-Z]+)/)[1] .toLowerCase(); } // 参数过滤函数 function filterNull(o) { for (
var key in o) { if (o[key] === null) { delete o[key]; } if (toType(o[key]) === "
string") { o[key] = o[key].trim(); } else if (toType(o[key]) === "object") {
o[key]= filterNull(o[key]); } else if (toType(o[key]) === "array") { o[key] =
filterNull(o[key]); } }return o; } // http request 拦截器
axios.interceptors.request.use( config=> { if
(window.localStorage.Token&&window.localStorage.Token.length>=128) {
//store.state.token 获取不到值??// 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.Authorization = window.localStorage.Token; } return config; },
err=> { return Promise.reject(err); } ); // http response 拦截器
axios.interceptors.response.use( response=> { return response; }, error => { if
(error.response) {switch (error.response.status) { case 401: // 返回 401
清除token信息并跳转到登录页面 router.replace({ path: "login", query: { redirect:
router.currentRoute.fullPath } }); } }return
Promise.reject(error.response.data);// 返回接口返回的错误信息 } ); /* 接口处理函数
这个函数每个项目都是不一样的,我现在调整的是适用于https://cnodejs.org/api/v1 的接口,如果是其他接口
需要根据接口的参数进行调整。参考说明文档地址:https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
主要是,不同的接口的成功标识和失败提示是不一致的。 另外,不同的项目的处理方法也是不一致的,这里出错就是简单的alert*/ function
apiAxios(method, url,params, success, failure) { if (params) { params =
filterNull(params); } axios({ method: method, url: url, data: method === "POST"
|| method ==="PUT" ? params : null, params: method === "GET" || method === "
DELETE" ? params : null, baseURL: root, withCredentials: false })
.then(function(res) { success(res.data); }) .catch(function(err) { let res =
err.response;if (err) { window.alert("api error, HTTP CODE: " + res.status); }
}); }// 返回在vue模板中的调用接口 export default { get: function(url, params, success,
failure) {return apiAxios("GET", url, params, success, failure); }, post:
function(url,params, success, failure) { return apiAxios("POST", url, params,
success, failure); }, put: function(url,params, success, failure) { return
apiAxios("PUT", url, params, success, failure); }, delete: function(url, params
, success, failure) {return apiAxios("DELETE", url, params, success, failure);
} };
运行项目查看:



 

大家观察可以看到,我们第一次点击 Home 的时候,发现跳转到了 Login 页面,然后登录后,自动跳转首页,并成功获取到数据,登录成功!

然后退出登录,发现首页已经进不去了,退出成功!

 

四、说明

 今天因为时间的关系,没有把 Vuex 在路由中如何获取研究出来,这里先用了本地缓存来代替了,大家如果有知道的小伙伴,请留言哈~~~不胜感激,

五、CODE

前端:
https://github.com/anjoy8/Blog.Vue <https://github.com/anjoy8/Blog.Vue>

后端:

https://github.com/anjoy8/Blog.Core <https://github.com/anjoy8/Blog.Core>