vue-cli项目使用axios实现登录拦截

登录拦截

一。路由拦截

项目中某些页面需要用户登录后才可以访问,在路由配置中添加一个字段requireAuth

  • 在router/index.js中

    const router = new Router({
      routes: [
    {
      //登陆
      path:‘/Login‘,
      component:Login
    },
    {
      //用户中心
      path:‘/UserCenter‘,
      component:UserCenter,
      meta: {
        requireAuth: true
      },
    }
      ]
    })
    router.beforeEach((to, from, next) => {
      if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
    if (localStorage.getItem(‘token‘)) {// 判断是否登录
      next()
    } else {// 没登录则跳转到登录界面
      next({
        path: ‘/Login‘,
        query: {redirect: to.fullPath}
      })
    }
      } else {
    next()
      }
    })
    export default router

二,axios请求拦截,

原文地址:https://www.cnblogs.com/zjwxy/p/9197627.html

时间: 2024-07-31 05:02:32

vue-cli项目使用axios实现登录拦截的相关文章

vue cli 项目的提交

前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 git init 将项目所有文件(未被ignore)添加到仓库 git add . 将add文件提交到本地仓库 git commit -m '提交信息' 本地仓库关联远程git仓库 git remote add origin git仓库 本地仓库代码提交到服务器 git push -u origi

vue cli 项目创建

初始化项目 我们用vue init命令来初始化项目,具体看一下这条命令的使用方法. $ vue init <template-name> <project-name>$ vue init <template-name> <project-name>init:表示我要用vue-cli来初始化项目 <template-name>:表示模板名称,vue-cli官方为我们提供了5种模板, webpack-一个全面的webpack+vue-loader的模

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, acti

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

vue cli中环境变量和模式

环境变量配置 环境变量可以在以下文件中配置: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 (.local优先于.env生效) 文件内部使用键值对的方式对变量进行配置 被载入的变量将会对 vue-cli-service 的所有命令.插件和依赖可用,同时为一个特定模式准备的环境文件的 (例如 .env.

npm 在安装 Vue脚手架命令(npm install -g @vue/cli)时报错安装报错--“Unexpected end of JSON input while parsing near&#183;&#183;&#183;”

在安装Vue的脚手架(npm install -g @vue/cli 项目名称)时,提示: Unexpected end of JSON input while parsing near 其实,但凡使用npm 时,只要提示这个,都可以按照以下几种方式进行尝试. 第一种:删掉package.lock.json 第二种:清除cache npm cache clean --force第三种:进入下面这个文件夹,把文件夹npm-cache下的内容删除掉(清除cache) 路径:C:/Users/DELL

【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)

一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const routes = [     {         path: '/',         name: '/',         component: Index     },

vue+axios 前端实现登录拦截(路由拦截、http拦截)

一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. const routes = [     {         path: '/',         name: '/',         component: Index     },     {         path: '/repository',         name: 'rep

vue+axios 前端实现登录拦截

参考:http://blog.csdn.net/qq673318522/article/details/55506650 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'r