该项目是利用了Github提供的个人标记作为登录令牌,通过令牌访问你的库列表。通过这个项目学习如何实现一个前端项目中所需要的登录及拦截,登出,令牌失效的拦截及对应axios拦截器的使用。
你需要先生成自己的Github的个人标记(,生成牌)。令牌生成后访问演示,即可查看你的<代码>库。
列表
├──README.md
├──dist//打包构建后的文件夹
│├──build.js
│└──build.js.map
├──index . html
├──package.json
├──src
│├──App.vue
│├──资产
││├──css.css
││├──icon.css
││└──logo.png
│├──常数
││└──api。js//配置api接口文件
│├──http。js//封装取回,帖子请求及http拦截器配置文件
│├──index.vue
│├──login.vue
│├──main.js
│├──repository.vue
│├──路由器。js//路由配置文件
│└──商店
│├──store.js
│└──类型。js//vuex类型
└──webpack.config.js
<李> Vue 2.0
<李> vue-router李
<李> vuex李
<李> axios李
<李> vue-material
李
第一步:路由拦截
首先在定义路由的时候就需要多添加一个自定义字段<代码>,requireAuth>
const路线=[
{
路径:“/?
名称:“/?
组件:指数
}，
{
路径:/库,
名称:“库”,
元:{
requireAuth:真的,//添加该字段,表示进入这个路由是需要登录的
}，
组件:库
}，
{
路径:/登录,
名称:“登录”,
组件:登录
}
);
定义完路由后,我们主要是利用,<代码> vue-router> ,beforeEach() 对路由进行判断。
路由器。beforeEach(下),从=比;{
如果(to.meta.requireAuth){//判断该路由是否需要登录权限
如果(store.state.token){//通过vuex国家获取当前的令牌是否存在
next ();
}
其他{
下一个({
路径:/登录,
查询:{重定向:。fullPath}//将跳转的路由路径作为参数,登录成功后跳转到该路由
})
}
}
其他{
next ();
}
})
每个钩子方法接收三个参数:
<李>:路线:即将要进入的目标路由对象李
<李>:路线:当前导航正要离开的路由李
<李>:功能:一定要调用该方法来解决这个钩子。执行效果依赖一方法的调用参数。
李
<李> next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是证实(确认的)。
<李>下(错误):中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮),那么URL地址会重置到从路由对应的地址。
<李> next(“/?或者<代码>下({路径:'/'}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
确保要调用一方法,否则钩子就不会被解决。
完整的方法见,<代码>/src/router.js
其中,<代码>。元> requireAuth>
登录拦截到这里就结束了吗?并没有。这种方式只是简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。还有一种情况便是:当前令牌失效了,但令牌是依然保存在本地。这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。这时候就需要结合http拦截器+后端接口返回的http状态码来判断。
第二步:拦截器
要想统一处理所有http请求和响应,就得用上axios的拦截器。通过配置,<代码> http响应inteceptor>
//http请求拦截器
axios.interceptors.request.use (
配置=比;{
如果(store.state.token){//判断是否存在令牌,如果存在的话,则每个http头都加上令牌
config.headers。授权='牌$ {store.state.token} ';
}
返回配置;
}，
呃=比;{
返回Promise.reject (err);
});//http响应拦截器
axios.interceptors.response.use (
响应=比;{
返回响应;
}，
错误=比;{
如果(error.response) {
开关(error.response.status) {
401年情况://返回401年清除牌信息并跳转到登录页面
store.commit (types.LOGOUT);
router.replace ({
路径:“登录”,
查询:{重定向:router.currentRoute.fullPath}
})
}
}
返回Promise.reject (error.response.data)//返回接口返回的错误信息
});
