php框架vue分离 vue3可以用于前后端不分离吗

今天我爱编程网小编整理了php框架vue分离 vue3可以用于前后端不分离吗相关信息，希望在这方面能够更好的大家。

Vue项目前后端分离下的前端鉴权方案

# Vue项目前后端分离下的前端鉴权方案

### 技术栈

前端Vue全家桶，后台.net。

### 需求分析

1. 前端路由鉴权，屏蔽地址栏入侵

2. 路由数据由后台管理，前端只按固定规则异步加载路由

3. 权限控制精确到每一个按钮

4. 自动更新token

5. 同一个浏览器只能登录一个账号

### 前端方案

> 对于需求1、2、3，采用异步加载路由方案

1. 首先编写vue全局路由守卫

2. 排除登录路由和无需鉴权路由

3. 登录后请求拉取用户菜单数据

4. 在vuex里处理菜单和路由匹配数据

5. 将在vuex里处理好的路由数据通过`addRoutes`异步推入路由

```

router.beforeEach((to, from, next) => {

// 判断当前用户是否已拉取权限菜单

if (store.state.sidebar.userRouter.length === 0) {

// 无菜单时拉取

getMenuRouter()

.then(res => {

let _menu = res.data.Data.ColumnDataList || [];

// if (res.data.Data.ColumnDataList.length > 0) {

// 整理菜单&路由数据

store.commit("setMenuRouter", _menu);

// 推入权限路由列表

router.addRoutes(store.state.sidebar.userRouter);

next({...to, replace: true });

// }

})

.catch(err => {

// console.log(err);

// Message.error("服务器连接失败");

});

} else {

//当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面

if (to.path == "/login") {

next({

name: "index"

});

} else {

next();

}

}

} else {

// 无登录状态时重定向至登录 或可进入无需登录状态路径

if (to.path == "/login" || to.meta.auth === 0) {

next();

} else {

next({

path: "/login"

});

}

}

});

```

##### 注意

> 我这里无需鉴权的路由直接写在router文件夹下的index.js，通过路由元信息meta携带指定标识

```

{

path: "/err-404",

name: "err404",

meta: {

authentication: false

},

component: resolve => require(["../views/error/404.vue"], resolve)

},

```

> 上面说到路由是根据后台返回菜单数据根据一定规则生成，因此一些不是菜单，又需要登录状态的路由，我写在router文件夹下的router.js里，在上面步骤4里处理后台返回菜单数据时，和处理好的菜单路由数据合并一同通过`addRoutes`推入。

这样做会有一定的被地址栏入侵的风险,但是笔者这里大多是不太重要的路由，如果你要求咳咳，可以定一份字典来和后台接口配合精确加载每一个路由。

```

// 加入企业

{

path: "/join-company",

name: "join-company",

component: resolve => require([`@/views/index/join-company.vue`], resolve)

},

```

> 在vuex中将分配的菜单数据转化为前端可用的路由数据，我是这样做的：

管理系统在新增菜单时需要填写一个页面地址字段`Url`,前端得到后台菜单数据后根据`Url`字段来匹配路由加载的文件路径，每个菜单一个文件夹的好处是：你可以在这里拆分js、css和此菜单私有组件等

```

menu.forEach(item => {

let routerItem = {

path: item.Url,

name: item.Id,

meta: {

auth: item.Children,

}, // 路由元信息 定义路由时即可携带的参数，可用来管理每个路由的按钮操作权限

component: resolve =>

require([`@/views${item.Url}/index.vue`], resolve) // 路由映射真实视图路径

};

routerBox.push(routerItem);

});

```

> 关于如何精确控制每一个按钮我是这样做的，将按钮编码放在路由元信息里，在当前路由下匹配来控制页面上的按钮是否创建。

菜单数据返回的都是多级结构，每个菜单下的子集就是当前菜单下的按钮权限码数组，我把每个菜单下的按钮放在此菜单的路由元信息`meta.auth`中。这样作的好处是：按钮权限校验只需匹配每个菜单路由元信息下的数据，这样校验池长度通常不会超过5个。

```

created() {

this.owner = this.$route.meta.auth.map(item => item.Code);

}

methods: {

matchingOwner(auth) {

return this.owner.some(item => item === auth);

}

}

```

> 需求4自动更新token，就是简单的时间判断，并在请求头添加字段来通知后台更新token并在头部返回，前端接受到带token的请求就直接更新token

```

// 在axios的请求拦截器中

let token = getSession(auth_code);

if (token) config.headers.auth = token;

if (tokenIsExpire(token)) {

// 判断是否需要刷新jwt

config.headers.refreshtoken = true;

}

// 在axios的响应拦截器中

if (res.headers.auth) {

setSession(auth_code, res.headers.auth);

}

```

> 对于需求5的处理比较麻烦，要跨tab页只能通过`cookie`或`local`,笔者这里不允许使用`cookie`因此采用的`localstorage`。通过打开的新页面读取`localstorage`内的`token`数据来同步多个页面的账号信息。`token`使用的`jwt`并前端md5加密。

这里需要注意一点是页面切换要立即同步账号信息。

> 经过需求5改造后的全局路由守卫是这样的：

```

function _AUTH_() {

// 切换窗口时校验账号是否发生变化

window.addEventListener("visibilitychange", function() {

let Local_auth = getLocal(auth_code, true);

let Session_auth = getSession(auth_code);

if (document.hidden == false && Local_auth && Local_auth != Session_auth) {

setSession(auth_code, Local_auth, true);

router.go(0)

}

})

router.beforeEach((to, from, next) => {

// 判断当前用户是否已拉取权限菜单

if (store.state.sidebar.userRouter.length === 0) {

// 无菜单时拉取

getMenuRouter()

.then(res => {

let _menu = res.data.Data.ColumnDataList || [];

// if (res.data.Data.ColumnDataList.length > 0) {

// 整理菜单&路由数据

store.commit("setMenuRouter", _menu);

// 推入权限路由列表

router.addRoutes(store.state.sidebar.userRouter);

next({...to, replace: true });

// }

})

.catch(err => {

// console.log(err);

// Message.error("服务器连接失败");

});

} else {

//当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面

if (to.path == "/login") {

next({

name: "index"

});

} else {

next();

}

}

} else {

// 无登录状态时重定向至登录 或可进入无需登录状态路径

if (to.path == "/login" || to.meta.auth === 0) {

next();

} else {

next({

path: "/login"

});

}

}

});

}

```

> 经过需求5改造后的axios的请求拦截器是这样的，因为ie无法使用`visibilitychange`，并且尝试百度其他属性无效，因此在请求发出前做了粗暴处理：

```

if (ie浏览器) {

setLocal('_ie', Math.random())

let Local_auth = getLocal(auth_code, true);

let Session_auth = getSession(auth_code);

if (Local_auth && Local_auth != Session_auth) {

setSession(auth_code, Local_auth, true);

router.go(0)

return false

}

}

```

> 这里有一个小问题需要注意：因为用的`local`因此首次打开浏览器可能会有登录已过期的提示，这里相信大家都能找到适合自己的处理方案

###  结语

经过这些简单又好用的处理，一个基本满足需求的前后端分离前端鉴权方案就诞生啦

前后端分离必须用vue吗

vue3可以用于前后端不分离吗

前后端分离就是后端把数据都封装在一个url地址中，前端只要用ajax去请求就行。不用框架也能实现分离。vue angular是为开发效率而生的。

以后基本上所有的网页都会用前后端分离的架构，但是现在一般的公司还是前后端混合开发，还得看你想去的公司是怎么样的的，大公司的话为了开发效率基本上所有都是前后端分离了，所以并不是说你还要去学vue这些前端的东西。

优点：性能好 简单易用 前后端分离 单页面应用用户体验好 缺点：vue是做单页应用的，多页应用虽然也可以做，但是不够灵活。

你都说了是前后端分离，就不需要把vue嵌套php代码里。前后端用纯接口交换数据，找后端同事定义好restful接口，清楚返回的数据结构，接下来前端这块你就可以自己mock数据进行开发了。

如何进行前后端分离

前后端分离的意思是，前后端只通过 JSON 来交流，组件化、工程化不需要依赖后端去实现。

在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。

前后端分离，那后端就不应该修改前端项目文件，并且前后端交互都应通过ajax执行。所以，后端只需要提供api，前端在html调用api即可。

首先：软件系统架构的前后端分离更多是在近几年伴随互联网的盛行为提高前端与后端交互的响应速率，提升用户的体验进行衍生出了前后端分离架构。如：Vue、NodeJS与微服务架构结合。

）webpack设置proxy，这个通过webpack文档或GOOGLE一下可以解决。

微信前端,原来是jsp,现在要前后端分离。单纯的html5还是vue呢

而且jsp是前后端不分离的开发模式、html一般是前后端分离的开发模式 如果是放大到前端，现在都不是说什么jsp、html的问题，是讲要使用什么技术开发的问题。 我爱编程网

后台代码拆分出来 ，jsp文件全部抛弃掉，controller只做json数据返回。

前后端分离更快 前后分离的优势：可以实现真正的前后端解耦，前端服务器使用nginx。

2020年了,如果现在做一个PC传统网站(多页面、符合SEO),要求要工程化...

1、综上所述，2020年我们可以选择前后端分离的模式，使用vue+WebAPI的模式进行PC端页面的开发。

2、网站宣传与推广 首先企业自身要有推广网站的意识：在任何出现公司信息的地方都加上公司的网址，如名片、办公用品、宣传材料、媒体广告等。此外网络广告和搜索引擎登记是目前网站主要的推广方式。

3、首先，优先把握网站的核心流量，把网站流量划分的更垂直些。比如说卖酒的网站要想好重点打哪部分客户。酒分为清香型、浓香型、酱香型，它们分别针对的是不同的用户群体。

后端需要学VUE吗

1、所以并不是说你还要去学vue这些前端的东西。

2、当一个程序员在熟练掌握了java、web等相关课程后是可以直接做项目的，vue只是为做项目的方式增加了一个新的选项，学不学会不影响做项目。

3、但是，如果你不需要前后端分离的架构模式，就不必使用Vue.js或其它前端框架了。因此，使用Vue.js还是其它框架，取决于你所构建的应用程序的需求和设计，以及团队成员的技术水平和个人喜好等多重因素。

4、如果仅仅还是传统的各种cms开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会使你未来技术长足成长的不二选择。

前端开发用vue还是直接h5

1、我觉得前端更关系的事情应该是界面要好看，开发效率高。在pc端，我觉得现在的网络根本不用去担心多少前端的性能问题。

2、web前端是一个统称，是一个包含各种技术的合集，h5只是其中一种，还有css，html啥的都属于前端。就好像，web前端是个水果篮，里面的h5可能是个苹果，还装着其他的香蕉啦，火龙果啦，葡萄啦等等。

3、如果你想要你的应用尽可能的小和快，请选择Vue。如果你打算构建一个大型应用程序，请选择React。如果你想要一个同时适用于Web端和原生APP的框架，请选择React。

4、vue-element-admin 一个基于vue0和Element的控制面板UI框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板已经非常成熟了，并且有相关的社区和维护人员，开发时遇到问题也不要慌。

5、当app需要h5页面的时候，作为前端开发的我们不管是用原声js还是使用框架Vue、React，我们都只是给app提供一个页面而已。当app只需要h5做展示的时候，我们就是写一个页面给他们就行了，非常容易。

6、在Vue0时代，国内大厂的前端开发框架，几乎清一色偏向React。其实现在来说，vue和react都相差无几，各有优劣，两者差距更多的是在语法，社区活跃度，实现原理之间的差距。

vue3可以用于前后端不分离吗

可以。因为Vue3发布的就是前后端分离，并提供DevOps功能，后台使用Spring Boot 前后端不分离。所以使用vue3可以用于前后端不分离，前后端分离的意思指通过Tomcat+Ngnix有效地进行解耦,是web应用的一种架构模式。

以上就是我爱编程网小编给大家带来的php框架vue分离 vue3可以用于前后端不分离吗全部内容，希望对大家有所帮助！